-
웹표준 사이트 레이아웃 만들기 연습 1프로그래밍 연습 2020. 10. 9. 23:25
웹표준 사이트 레이아웃 만들기 연습 1
인프런 기초강의를 보면서
차근차근 진행하고 있는 Webstoryboy님 영상이다.
보면서 차근차근 태그 개념도 알아갈 겸 정리하는 중.
01. 웹 표준 사이트 만들기(2019) - layout01
https://wtss.tistory.com/168#comment17580504
01. 웹 표준 사이트 만들기(2019) - layout01
사이트를 만들기 전에 레이아웃을 익히는 것은 가장 기본입니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. 앞으로 나오는 레이아웃 예제를 하나하나씩 따
wtss.tistory.com
완성 예제 소스는 위 사이트 주소로 들어가면 된다.
블록구조로 div를 쓰면 한 영역을 자기의 영역으로 인식하기 때문에
오른쪽에 다른 것이 오는 것을 싫어하기 때문에 아래로 내려간다.
그래서 원하는 형태로 정렬하려면 블록구조로 만들어야 하므로 float : left를 적용한다.
컨텐츠와 사이드에 float : left를 주면 side와 contents의 hight 구조가 깨지는 버그가 발생한다.
여러가지 방법 중 하나인 float : left를 footer에도 적용한다.
그러나 -_-;;
footer에 float : left를 적용했을 때 footer가 nav의 오른쪽으로 삐져나온 것을 확인할 수 있었다.
이유를 모르겠으니 우선 marign을 적용했더니 footer가 정상적으로 아래로 내려갔다.
1. HTML 태그 정리
Class와 id의 공통점과 차이점
id=identifier
style을 줄 때는 앞에 #을 사용한다
<Style></style> <body></body> #next id="next" 고유한 속성으로 한 HTML 문서에 하나만 사용 가능하며,
주로 박스 형태에서 큰 레이아웃에 해당하는 부분에 주로 쓰인다.
고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색이 수월함
Class
Class를 줄 때는 앞에 .을 사용한다.
<Style></style> <body></body> .black class="black" 스타일 속성의 공통 적용을 위해 사용하며, 공통된 class가 적용된 모든 태그가 동작하게 된다.
body 안에서 여러 번 사용 가능하다.
하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수 있음
홈페이지 전체적인 스타일을 일관성 있게 유지하기 위해 필수적임
<body> 태그
문서 본문에 해당하는 콘텐츠를 포함하는 영역이다. 문서에서 한 번만 사용된다.
텍스트, 링크, 이미지, 테이블, 리스트 등 문서의 모든 내용을 포함한다.
속성은 블록 요소(Block Element)이다.
속성(Property)
속성 값 설명 background background="URL" 문서의 배경 이미지를 설정합니다. <div> 태그
문서의 영역을 나누거나 그룹화 할 때 사용한다.
시멘틱 태그(<article> or <nav>)의 활용이 적절하지 않은 경우에 사용한다.
속성은 블록 요소(Block Element)이다.
비교
<div>태그는 블록 요소를 그룹화하고, <span>태그는 인라인 요소를 그룹화한다.
크로스브라우징
<div>태그의 align 속성은 HTML5에서는 지원하지 않는다.
이 기능은 CSS Grid와 CSS Flexbox가 대신 한다.
속성 (Property)
속성 값(예제) 설명 align left
right
center
justify요소를 왼쪽으로 정렬한다.
요소를 오른쪽으로 정렬힌다.
요소를 가운데로 정렬한다.
요소를 양쪽 정렬한다.<header> 태그
웹 문서의 소개 컨텐츠 및 네비게이션 링크를 정의한다.
제목, 로고, 아이콘, 저자 정보 등을 포함한다.
섹션의 제목 태그를 포함하기 위한 것이지만 필수사항은 아니다.
블록 요소(Block Element)이다.
<nav> 태그
웹 문서에 네비게이션 링크를 정의한다.
주요 네비게이션 링크는 <nav>태그를 사용한다.
일반적으로 <footer>영역에 링크는 <nav>태그를 사용하지 않는다.
주로 사이트 탐색용과 페이지 탐색용으로 사용한다.
블록 요소(Block Element)이다.
<footer> 태그
웹 문서의 바닥글 영역을 정의한다.
사이트와 관련된 정보(저작권자, 연락처, 사이트맵, 관련된 문서 링크)가 포함된다.
한 문서에서 여러번 사용할 수 있다.
섹션을 구성하는 태그가 아니기 때문에 섹션을 잡기 위해서 사용하는 태그로는 적절하지 않다.
<address>요소가 포함될 수 있다.
인라인(Inline Element) 요소이다.
닫는 태그 사용
2. CSS 태그 정리
float
블록요소의 정렬 상태를 설정한다
특징 설명 기본값 float : none 상속 안됨 문법 (Syntax)
float : none | left | right
속성 (Property)
속성값 설명 none float의 성질 적용하지 않음 left right line-height
- 문장과 문장 사이의 간격을 설정한다.
- 음수 값은 지정할 수 없다.
- 숫자나 백분율로 지정했을 때는 글자 크기를 기준으로 지정한다.
특징 설명 기본 값 line-height:normal 상속 가능 애니메이션 가능 적용 font 문법 (Syntax)
line-height: normal l number l length l percentage
속성 (Property)
속성값 설명 normal 문장과 문장 사이의 기본 간격이다 number 문장과 문장 사이의 간격을 숫자 배수만큼 설정한다 length 문장과 문장 사이의 간격을 CSS 단위로 설정한다 percentage 문장과 문장 사이의 간격을 %로 설정한다 text-align
텍스트 정렬 방식을 설정한다.
특징 설명 기본값 text-align:left 상속 가능 문법(Syntax)
text-align: left l right l center l justfy
속성 (Property)
속성값 설명 left right center justify 텍스트의 정렬을 양쪽으로 설정한다 inherit 텍스트의 정렬을 상위요소한테 상속받는다 text-transform
텍스트를 대문자나 소문자로 변경하며, 영어에만 해당하는 속성이다
특징 설명 기본 text-transform : none 상속 가능 문법 (syntax)
text-transform : none | capitalize | uppercase | lowercase
속성(Property)
속성값 설명 none text-trasform을 속성을 적용하지 않습니다 capitalize 각 단어의 첫 글자만 대문자로 변경합니다. uppercase 텍스트를 모두 대문자로 변경합니다. lowercase 텍스트를 모두 소문자로 변경합니다. margin
요소의 바같쪽 여백을 설정합니다.
특징 설명 기본값 margin-top : 0;
margin-right : 0;
margin-bottom : 0;
margin-left 0;상속 가능 문법(Syntax)
margin : length | % | auto
속성(Property)
속성값 설명 length 요소의 바깥쪽 여백을 CSS단위를 통해 설정합니다. % 요소의 바깥쪽 여백을 %를 통해 설정합니다. auto <Style>태그
스타일 내에서의 태그 우선순위
!important>인라인 스타일>id선택자>class선택자>요소 선택자>상속된 선택자
그 외 참고링크
www.opentutorials.org/module/484/4149
'프로그래밍 연습' 카테고리의 다른 글
인프런 실전 HTML CSS 강좌 정리 - CSS 기본 1, 2 (0) 2020.10.19 웹표준 사이트 레이아웃 만들기 연습 1 스스로 코드 작성하기 (0) 2020.10.14 인프런 실전 HTML CSS 강좌 정리 - HTML 기본3 (0) 2020.10.13 인프런 실전 HTML CSS 강좌 정리 - HTML 기본2 (0) 2020.10.10 인프런 실전 HTML CSS 강좌 정리 - HTML 기본 (0) 2020.10.09