본문 바로가기

Frontend57

08. HTML 메타(meta) 요소 ○ 메타데이터 - 데이터에 대한 데이터 - 데이터를 설명하는 데이터 (e.g. 사진 정보를 보면 나오는 날짜, 장소 등) - HTML 또한 데이터이기 때문에 그에 대한 메타데이터(문서 정보, 작성자 등)가 존재 ○ HTML meta 요소 - HTML 문서에 대한 정보를 안에 태그를 이용해서 넣는다 - : HTML문서에서 사용하는 문자셋을 인코딩 (필수) - : HTML문서에 대한 설명 (선택) - : 검색엔진 키워드 정의 (선택) - : HTML문서를 만든 사람 (선택) - : 뷰포트 설정 (필수) - : 정해진 시간마다 주기적으로 HTML문서를 새로고침 (선택) 2022. 4. 2.
07. CSS display 속성 ○ display 속성 - 해당 요소가 화면에 어떻게 보일지를 지정 - display : none; 해당 요소를 화면에 출력하지 않음 - display : block; 해당 요소를 블록 레벨로 지정 - display : inline; 해당 요소를 인라인 레벨로 지정 (margin, float 적용X) - display : inline-block; 인라인 레벨요소이면서 블록 레벨 속성을 갖도록 지정 (margin, float 적용O) display: none: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. HELLO WORLD! Vestib.. 2022. 4. 1.
06. CSS Positioning (float, z-index) ○ float - 세로배치(기본)된 요소를 가로배치로 변경 - 왼쪽이나 오른쪽으로 배치가능 - 형식 : float : left | right ; BOX 1 BOX 2 BOX 3 BOX 4 ○ clear - float 속성 해제 - folat 속성을 해제하지 않으면 모든 요소들이 앞의 요소의 옆에 줄줄이 따라오므로 clear를 이용해 해제해 준다 - clear : left | right | both ; ○ z-index - 레이어 순서 정하기 - 가장 큰 수가 위로, 레이어 순서값은 음수도 허용 aa bb cc ○ 전체 레이아웃 구성하기 - position(배치방법), float(수평정렬), clear(float해제), z-index(레이어순서)를 사용해 화면 레이아웃을 구성 Header Section1 .. 2022. 3. 31.
05. CSS Positioning (position 속성) ○ Positioning (포지셔닝, 레이아웃) - 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치 하는 것 - 수평, 수직, 그리드 방향으로 배치할 수 있다 ○ Position 속성 - 형식 : position: static | relative | fixed | absolute | sticky ; - top, right, bottom, left 속성으로 위치를 지정 (상하좌우 여백으로 위치 조정) ○ 부모·자식 구조 (=Tree구조) - 부모(Parent) : 상위에 하위 요소를 감싸고 있는 요소 - 자식(Child) : 하위에 있는 요소 ○ Position : static - 문서의 흐름에 맞춰 배치 (가장 기본) - 수직으로만 배치 (top, right, bottom, left, z.. 2022. 3. 30.
04. CSS Reset ○ Reset의 필요성 (스타일 초기화) - 브라우저들은 각각 다른 기본 스타일을 가지고 있기 때문에 같은 CSS 스타일을 적용해도 화면에 출력되는 모습이 다를 수 있다. 이런 문제를 해결하기 위해서 스타일을 모두 초기화해서 동일하게 만든 뒤 CSS 스타일을 추가하면 브라우저와 상관없이 같은 화면이 출력되게 만들 수 있는데 이를 reset이라고 한다. ○ Reset 하는 법 - 보통 reset.css 파일을 하나 저장해두고 import하여 사용 Welcome to the Jungle Welcome to the Hotel California Welcome to the Black Parade - 많이 참조하는 reset 파일 ① Eric Meyer's "Reset CSS" : https://meyerweb... 2022. 3. 29.
03. 다양한 선택자(Selector) ○ 전체 선택자 (*) - 현재 HTML 내의 모든 요소에 스타일 적용하기 - 형식 : *{속성: 속성값; 속성: 속성값;} *{ font-family: 궁서체; font-size: 40px; font-style: italic; font-weight: bold;} ○ 태그 선택자 - 지정된 태그에는 모두 스타일 적용하기 - 형식 : 태그{속성: 속성값; 속성: 속성값;} p{/* 모든 요소 */ font-family: 굴림체; font-size: 20px; font-weight: bolder;} ○ 클래스 선택자 - 지정된 클래스에는 모두 스타일 적용하기 - 형식 : .클래스명{속성: 속성값; 속성: 속성값;} .hide{ width: 0; height: 0; margin: 0; padding: 0; f.. 2022. 3. 28.