[HTML&CSS 스터디] 2. 웹 사이트의 제작 흐름1. 제작 흐름 살펴보기 1. 제작 흐름 살펴보기 (1) 기획웹에는 다양한 종류가 있다.종류와 목적에 따라 구성이 달라지기 떄문에, 목적을 명확하게 해야 한다.고려해야 할 점: 사용자가 원하는 정보/사용자가 해당 사이트에서 무엇을 하면 좋을까?목적 설정/타깃 사용자 설정 등의 절차가 있다. (2) 사이트 맵 만들기웹 사이트의 목적과 사용자를 정했다면, 웹 사이트에 무엇이 필요할지 / 페이지끼리 어떻게 연결할지 등을 그림으로 그린다. 이러한 구성도를 "사이트맵"이라고 한다.사이트맵을 그릴 때는 관련된 페이지를 그룹으로 묶는 것이 좋다.이 때, 한 카테고리가 한 계층이 되는데, 2계층 이내로 설계하는 것이 좋다. (3) 와이어프레임 만들기페이지 구성이 끝..

[HTML&CSS 스터디] 1. 웹 디자인의 개념과 종류1. 웹 디자인이란? 2. 사용성 3. 웹 사이트의 구조1. 웹 디자인이란?(1) 디자인 = 무언가를 전달하기 위한 도구. (!= 아름답게 장식하는 것) (2) 디자인은 "문제를 해결하는 방법"이다! (3) 웹 디자인에는... -기업 사이트: 기업의 정보를 담고 있는 사이트 -프로모션 사이트: 제품,서비스,이벤트 전달을 목적으로 제작된 사이트 -포트폴리오 사이트: 자신의 작품과 실적을 소개하는 사이트 -쇼핑 사이트: 상품을 보여주고, 구매를 유도하는 사이트 -미디어 사이트: 뉴스, 정보를 공개할 목적으로 제작된 사이트 -SNS: 짧은 컨텐츠를 주로 하는 사이트 와 같이 다양한 종류가 있으며, 형태에 따라 목적/주 고객층/내용이 다르다. *각각의 사이..

[Notion] 스터디를 더 끈끈하게 해주는 노션 템플릿! (velog.io) [Notion] 스터디를 더 끈끈하게 해주는 노션 템플릿!댓글, 코드 리뷰, 회고록, 개인 페이지 등의 기능이 있는 노션 스터디 템플릿을 공유합니다!velog.io

[CSS] 2. 주요 선택자와 캐스캐이딩의 개념 1. 주요 선택자(1) 전체 선택자: ‘*’로 선택한다.(2) 태그 선택자: ‘태그 이름’으로 선택한다.(3) 클래스 선택자: ‘.’으로 선택한다.(4) id 선택자: ‘#’으로 선택한다.(5) 그룹 선택자: ‘,’로 선택한다.  2. 캐스캐이딩 스타일 시트와 우선순위(1) 캐스캐이딩 스타일 시트(CSS)의 의미: 캐스캐이딩(Cascading)은 폭포처럼 위에서 아래로 쏟아진다는 의미이다. 캐스캐이딩 스타일 시트(Cascading Style Sheet)는 위에서 아래로 적용되는 스타일 시트를 의미한다. 이는 CSS에서 가장 중요하게 적용되는 원리이다.(2) 원칙: 캐스케이딩은 스타일 우선순위/스타일 상속이라는 두 가지 원칙을 가지고 있..

[CSS] 1. 스타일이란? 1. 스타일이란? (1) 스타일(style): HTML문서에서 사용하는 글꼴, 색상, 정렬 등 각 요소들의 배치와 문서의 외형을 결정짓는 내용이다. (2) 스타일 시트(style sheet): 스타일을 관리하기 쉽게 한 곳에 모아둔 것이다. (3) 왜 스타일을 사용하나?: -문서의 내용과 관계 없이 디자인만 바꿀 수 있다. (내용과 디자인의 분리) -다양한 기기에 맞춰 변하는 문서를 만들 수 있다. 2. 스타일의 형식 스타일 형식: p {text-align: center;} (선택자+스타일 속성+속성값) -선택자: { } 사이에 정의한 스타일 규칙이 적용될 대상을 말한다. -속성과 속성 값: '속성 : 속성 값' 의 형태로 함께 표시한다. -스타일 주석: /* 주석 내용 */..

[HTML] 6. 폼 관련 태그 오늘 배운 것 오늘은 , 태그 및 관련 속성들에 대해 배웠다. 위 태그, 속성들을 응용한 간단한 폼, 로그인 화면들을 제작했다. (1) & 태그 : 폼을 만들어주는 태그. : 통신 방식으로 post하는 태그이다. action 속성: 해당 문서로 이동하기 UI=User Interface : : 제출 버튼을 생성한다. 서버로 전송할 때 사용된다. 기본값으로 “제출”이 출력된다. (type=”submit”의 기본값이 “출력”이기 때문에, 태그에 value=”제출”을 추가해도 출력 텍스트가 변하지 않는다!) : 버튼을 출력한다. 다만 type=”submit”과는 다르게, 클릭은 가능하나 기본 이동은 되지 않는다. (2) & 관련 속성 및 응용 type=”checkbox”: 다중 ..

[HTML] 5. 표(테이블) 만들기 ​ (1) : 표를 나타내는 태그로, 표 전체를 감싼다. (2) (Table row): 표의 한 행을 나타낸다. (3)(Table data): 표의 데이터 셀을 나타낸다. (4)(Table header): 표의 제목 셀을 나타낸다. (5): 표의 제목(가운데 정렬)을 추가한다. ​ 아래의 코드를 따라 입력하면 이런 표가 만들어진다. ​ 아래의 코드로 출력된 표의 형태. ​ 우리동네 과일가게 가격표 요금 청송 사과 한 알에 3,000원 델몬트 바나나 한 묶음에 5,000원 (5)colspan 속성: 셀을 병합하고 싶을 때 사용하는 태그. 합치고 싶은 혹은 태그에 사용한다. (ex: 우리동네 과일가게 가격표/요금 ) (6)rowspan 속성: colspan 과 반대로, ..

[HTML] 4. 링크 삽입하기 ​ (1) 태그: 링크를 삽입 할 때는 태그를 사용한다. () (2) +: 태그를 함께 사용하여 이미지에 링크를 삽입 할 수도 있다. (3) 메일 전용 링크: href 속성에 “mailto:”를 덧붙여 사용하면, 이메일 전용 링크 역시 만들 수 있다. ​ *와 : 의 경우는 현재 열려 있는 창에서 링크에 접속한다. 의 경우는, 클릭 시 새 탭이 생기며 이동한다. ​ (6): html 문서 삽입 시 사용하는 태그. (ex: ) ​ *을 허용하는 웹사이트가 따로 있다. *은 화면 전체가 전환되지만, 일반적인 의 경우, 아래에 삽입된 작은 창 안에서 웹사이트가 전환된다. ​ "쇼핑몰"이라는 글자에 링크가 삽입된 모습. 맛있는 청송 사과가 한 알에 천 원! 지금 바로 쇼핑몰 로 ..

[HTML] 3. 이미지 출력하기 ​ (1)태그: 이미지를 출력할 때 필요한 태그. () (2) src 속성: “어떤 이미지를 출력할 것인가”를 정하는 속성. 이미지의 위치(폴더), 제목을 입력한다. (3) alt 속성: 이미지가 지정된 위치에 존재하지 않거나 출력할 수 없을 때, 이미지 대신 출력될 글을 입력하는 속성. (alt=”~”) ​ ​ (좌) 아래의 코드로 출력된 이미지. (우) 이미지 파일이 출력되지 않은 화면. 이 때 이미지 대신 alt로 설정해둔 문구가 표시된다. ​ 맛있는 청송 사과가 한 알에 천 원!

[HTML] 2. HTML 기본 태그 파일 생성시 HTML5: 입력시 기본적인 코드가 생성된다. : 글자 크기를 정하는 코드. h 앞에 오는 숫자가 작을 수록 글자가 커진다. : 줄바꿈 코드. 엔터 바와 같은 역할을 한다. : 단락 코드. 아래위로 한 줄 씩 띄운다. : 문단을 한 칸 들여써서 인용한다. : 작성한 코드를 소스 모양 그대로 출력한다. 프로그래밍 소스를 출력할 때 많이 쓴다.​ , : 글자를 진하게 강조한다. 볼드체. ,: 글자를 기울인 모양으로 바꾼다. 이탤릭체. ​ : 줄바꿈이 없는 인용. 대신 큰 따옴표가 추가된다. : 노란색 형광펜 표시. ​ : 영역을 지정하는 태그. ㄴ이후 style=”color:blue” 를 사용하여, 으로 지정한 영역의 글자들을 파란색으로 변경하였다. ​ , ..