[1일차] DO IT 웹싸이트 따라 만들기/p13~p107/HTML 기본상식, HTML 구조화

HTML 작성시 유의사항

 

의미있는 마크업

 

일관성 있고 표준화된 코드 사용

 

접근성을 지키며 작성

 

가독성을 고려하여 작성 

 

CSS 란 무었인가?

 

HTML 문서를 시각화 하기 위해 사용되는 언어

 

 

BOX MODEL

 

 

콘텐츠 영역은 텍스트나 이미지처럼 실질적인 내용이 담기는 부분 

 

패딩 : 내용과 테두리 사이의 간격 

 

마진은 실제 크기(width)에는 포함되지 않음 

 

바깥쪽 여백 : margin 속성

테두리 : border 속성

안쪽 여백 : padding 속성

 

박스의 가로 크기 width 속성

박스의 세로 크기 height 속성 

 

 

Block 과 inline or inline-block

 

block 은 <div>, <section>, <article>,<aside> 와 같이 레이아웃 구조를 결정하는 html sectionning 태그를 말함

 

줄 바꿈이 되는 요소를 의미 화면 전체는 width 와 관련이 있음

 

width 는 화면 전체 100%를 차지하고 부모 태그로 부터 상속받아서 정해짐

 

 

inline 은 한줄로 배치 될떄 사용 줄바꿈 되지 않음 오른쪽으로 붙는다. width,height 값을 적용해도 변경 안됨

 

inline 에는 block 요소가 올 수 없고 inline은 포함 할 수 있음

 

inline-block 인라인과 블록 속성 둘다 적용하고 싶을 때 사용 

 

 

 

*** 

block 태그는 형태가 다른 요소들 안에 포함할 수 있다. (block 안에 block, block 안에 inline)

block은 다른 inline도 안에 포함 할 수 있다.

inline 은 block을 포함할 수 없지만 같은 inline은 포함할 수 있다.

 

 

 

CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 

여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.

 

box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.

content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 

100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 

여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 

쉽습니다.

 

 

 

content-box
CSS 표준이 정의한 초기 기본값. width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 
즉 .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 370px입니다.
요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.


border-box
width 와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 

요소 상자 안에 위치함을 유의하세요. 
즉 .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 350px입니다. 콘텐츠 영역의 크기는 

음수일 수 없으므로  border-box를 사용해 요소를 사라지게 할 수는 없습니다.
요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.

 

 

 

CSS 선택자

 

기본 선택자

전체 선택자
모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.
구문: * ns|* *|*
예제: *은 문서 내의 모든 요소와 일치합니다.
유형 선택자
주어진 노드 이름을 가진 모든 요소를 선택합니다.
구문: elementname
예제: input은 모든 <input> 요소와 일치합니다.
클래스 선택자
주어진 class 특성을 가진 모든 요소를 선택합니다.
구문: .classname
예제: .index는 "index" 클래스를 가진 모든 요소와 일치합니다.
ID 선택자
id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.
구문: #idname
예제: #toc는 "toc" ID를 가진 요소와 일치합니다.
특성 선택자
주어진 특성을 가진 모든 요소를 선택합니다.
구문: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
예제: [autoplay]는 autoplay 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.
그룹 선택자
선택자 목록
,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.
구문: A, B
예제: div, span은 모든 <span>과 <div> 요소와 일치합니다.
결합자
자손 결합자
  (공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다.
구문: A B
예제: div span은 <div> 요소 안에 위치하는 모든 <span> 요소와 일치합니다.
자식 결합자
> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
구문: A > B
예제: ul > li는 <ul> 요소 바로 아래에 위치하는 모든 <li> 요소와 일치합니다.
일반 형제 결합자
~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
구문: A ~ B
예제: p ~ span은 <p> 요소를 뒤따르는 모든 <span> 요소와 일치합니다.
인접 형제 결합자
+ 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
구문: A + B
예제: h2 + p는 <h2> 바로 뒤에 위치하는 <p> 요소와 일치합니다.
열 결합자
|| 결합자는 같은 열에 속하는 노드를 선택합니다.
구문: A || B
예제: col || td는 <col>의 범위에 속하는 모든 <td> 요소와 일치합니다.
의사 클래스/요소
의사 클래스
의사 :은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있습니다.
예제: a:visited는 사용자가 방문한 모든 <a> 요소와 일치합니다.
의사 요소
의사 ::는 HTML이 포함하지 않는 개체를 선택합니다.
예제: p::first-line은 모든 <p> 요소의 첫 번째 줄과 일치합니다.

 

 

CSS 가상 클래스 선택자, 가상요소

 

:hover  --  특정 태그에 마우스를 오버 했을시에 대한 스타일이 적용

:nth-child(n) -- 형제 요소 중 n 번째에 해당하는 요소에 스타일이 적용

:nth-of-type(n) -- 특정 요소를 기준으로 순서가 부여됨

:first-child  -- 해당 요소의 첫 번째 요소에 스타일이 적용

:last-child  --  해당 요소의 마지막 요소에 스타일이 적용

:nth-last-child( ) -- 형제 요소 중 마지막 요소 부터 순서가 정해져 스타일이 적용

:nth-last-of-type( ) -- 형제 요소 중 특정 요소의 마지막 요소부터 순서가 정해져 스타일이 적용

:not(E) -- 부정 선택자 . 작성된 요소를 제외하고 나머지 요소에 스타일이 적용 

 

::after      p::after     content를 p 요소 다음에에 집어 넣는다.
::before   p::before   content를 p 요소 이전에 집어 넣는다.

 

 

 

transition

transition은 속성을 서서히 변화시키는 속성입니다.
transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다.
IE는 버전 10부터 지원합니다.


문법

transition: property timing-function duration delay | initial | inherit
property : transition을 적용시킬 속성을 정합니다. transition-property를 참고하세요.
timing-function : transition의 진행 속도를 정합니다. transition-timing-function를 참고하세요.
duration : transition의 총 시간을 정합니다. transition-duration을 참고하세요.
delay : transition의 시직을 연기합니다. transition-delay를 참고하세요.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.