[HTML & CSS] 주석 / 태그 / css 기본구조

[주석]

• 주석은 화면에 직접적으로 나타나지 않는다.
• html의 주석 형식은 <!-- -->
• css의 주석 형식은 /* */
• js의 주석 형식은 // 또는 /* */ (//는 문장 단위의 주석 처리, /* */은 문단 단위의 주석처리)
• 주석하고 싶은 구간을 선택하고 'Ctrl + /' 입력하면 주석처리가 가능하다.

 

[주석의 용도]

1. 메모

2. 코드를 실행시키지 않을 때

3. 개발자 간의 협업 또는 코드 구조 공유

See the Pen 주석 by psm817 (@psm817) on CodePen.

 

 

[태그]

• html이 브라우저에 불러질 때, 제대로 알아들을 수 있도록 작성되는 코드이다.
• 여기서 말하는 브라우저는 edge, safari, firefox 
• div태그 : 가장 많이 사용하는 태그. NaV, a처럼 역할이 있는 태그 외 아무 의미없는 공간에 사용한다.

See the Pen 태그 by psm817 (@psm817) on CodePen.

 

[body와 div(배경색)]

See the Pen body와 div(배경색) by psm817 (@psm817) on CodePen.

 

 

[태그 자동완성]

[Tab]

ex) html에 div를 작성하고 Tab키를 누르면 <div></div>로 자동 완성된다.

<div> : 여는 태그

</div> : 닫는 태그

<div></div> : 엘리먼트

 

1. html은 문서다.
2. html안에는 큰 덩어리로 head와 body가 있다. head는 html 문서에 대한 정보(css, js가 어디로 연결되는지 등)를 입력하고 body에는 구조가 들어간다.
3. body는 화면크기(모니터 해상도)에 따라 유연하게 크기를 가진다.
4. div는 우리가 아직 배우지 않은 display: block이라는 코드 때문에 body 크기를 그대로 가진다.
5. 아직은 살펴볼 수 없지만, body 크기는 두 가지고 높이를 줄 때 불편한 부분들이 있다.

 

• color 속성값으로는 컬러이름과 hex, rgb, rgba를 사용할 수 있다.
• 실제 코드를 작성할 때는 rgb와 rgba를 많이 사용하지만, 편리성을 위해 컬러 이름과 hex를 많이 사용할 예정이다.

 

[css 구조 예시]

/* 
선택자(태그명) {
속성: 속성값;
}
div -> 선택자(태그명)
color -> 속성
red -> 속성값
*/

 

 

[참고사이트]

[color picker 사이트]

https://to2.kr/eRB

색상 선택도구

 

[주소 줄이는 사이트]

https://to2.kr/

TO2