html semantic tag
header
문서의 머리말을 정의합니다. 사이트 로고, 제목, 네비게이션 링크 등이 포함될 수 있습니다.
nav
내비게이션 링크의 모음을 나타냅니다. 사이트의 주요 내비게이션 메뉴를 포함하는 데 사용됩니다.
main
문서의 주요 콘텐츠를 정의합니다. 페이지에서 가장 중요한 내용을 포함하며, 하나의
section
관련 콘텐츠 그룹을 정의합니다. 각 섹션은 제목을 포함하여 내용을 구분하는 데 사용됩니다.
article
독립적으로 구분되는 콘텐츠를 나타냅니다. 블로그 포스트, 뉴스 기사 등과 같은 독립적인 내용을 포함할 때 사용됩니다.
aside
문서의 주 콘텐츠와 간접적으로 관련된 콘텐츠를 나타냅니다. 사이드바나 참고 자료와 같은 보조 정보를 포함하는 데 사용됩니다.
footer
문서나 섹션의 바닥글을 정의합니다. 저작권 정보, 연락처 정보, 관련 링크 등을 포함할 수 있습니다.
css 단위
픽셀 (px)
고정된 단위로, 화면의 1픽셀에 해당합니다. 정확한 크기를 제공하지만, 다양한 화면 해상도에서 일관성이 떨어질 수 있습니다
퍼센트 (%)
부모 요소에 대한 상대적인 크기를 나타냅니다. 예를 들어, width: 50%는 부모 요소의 너비의 50%를 의미합니다.
엠 (em)
현재 요소의 글꼴 크기를 기준으로 한 상대적인 단위입니다. 예를 들어, 부모 요소의 글꼴 크기가 16px일 때 1.5em은 24px로 계산됩니다.
렙 (rem)
루트 요소의 글꼴 크기를 기준으로 하는 상대적인 단위입니다. 루트 요소(일반적으로 또는 )의 글꼴 크기에 따라 변동되므로, 전체적으로 일관된 디자인을 유지하는 데 유리합니다.
뷰포트 너비 (vw)
뷰포트의 너비의 1%에 해당하는 단위입니다. 예를 들어, width: 50vw는 뷰포트 너비의 50%를 의미합니다.
뷰포트 높이 (vh)
뷰포트의 높이의 1%에 해당하는 단위입니다. height: 100vh는 뷰포트의 전체 높이를 의미합니다.
css 선택자
type
Element, Tag
ex) p, div, span 등 html 태그에 대한 선택자입니다.
대소문자를 구별하지 않는다.
class
<div class="container"></div>
<div class="wapper"></div>
가장 흔하게 같은 요소를 구별하기 위해 class라는 속성을 사용하여 구별합니다.
css에서 사용하기 위해서는
.container{
....
}위처럼 .클래스명을 통해 css를 통해 속성을 부여할 수 있습니다.
id
<div id="container"></div>css에서 사용하기 위해서는
#container{
....
}#을 id명을 통해 css를 통해 속성을 부여할 수 있다.
id는 유니크한 값을 정하는 것을 권장합니다. (유일한 값으로 명명하여 html 사용하는 것이 좋습니다)
Attribute
[type]{
//...css
}
[type="text"]{
//...css
}위 []안에 type을 명시하여 사용할 수 있습니다.
보통 input에 대해 사용할 수 있는데 input에 대한 종류도 여러개가 있기 때문에
[type="text"]식으로 구별하여 사용할 수 있습니다.
Group
div,p,input{
font-size:16px
}똑같은 css 속성의 경우 ,를 사용하여 중복 내용 줄이기 위해서 사용할 수 있습니다.
Pseudo
class의 경우에는 :를 통하여 속성을 부여
.box-child{
width:100px;
height:100px;
background-color:red;
}
.box-child:hover{
background-color:black
}마우스가 해당 box-child에 올라갔을때 상태를 변화시키겠다.
마우스를 해당 box에 올라 갔을때 상태를 변경하기 위해 hover 가상 클래스를 이용합니다.
다양한 속성이 있는데 이에 대한 내용은 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes에서 확인할 수 있습니다.
element의 경우애는 ::를 통하여 속성을 부여
.container::before{
content:'a'
}
.container::after{
content:''
}::를 사용하는 가상 클래스의 경우 반드시 content를 명시해야 적용됩니다.
아무값을 명시하지 않아도 무조건 사용해야합니다.
Combining
div >p {
//
}부등기호를 통해 div 태그 안에 있는 p 태그를 명시하여 사용할 수 있습니다.
후기
html과 css에 자주 사용하는 내용의 경우에는 알고 있었지만 정확하게 어떤뜻으로 사용하고 어느 상황에 사용해야하는지에 대해 정확하게 알지 못했던거 같습니다. 이번 강의를 통해 평소 가지고 있던 궁금증에 대해 해소할 수 있어 뜻 깊은 강의였습니다.
