[TIL] 엘리스 SW 엔지니어트랙 2기 - html, css

엘리스 SW엔지니어 트랙 2기 DAY_1

 

오늘부터 TIL 적어보려고한다.

뭔가 구분지어 올리기엔 배운게 많고.. 다 정리하자니 글이 너무 많아지고.. TIL을 적긴하는데 조금 아쉽긴 하네

 

나중에 한 눈에 찾아보기가 쉽진 않을듯

TIL 잘 적는 사람 찾아보고 따라써야겠다 😁

---

💻 웹

3가지를 고려하여 만들어야한다.

1. 웹 표준

2. 웹 접근성

3. 크로스 브라우징

 

🧐 html, CSS

 

0.  article 태그

Article 태그(문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그)에는 

h# 태그가 필수로 들어가야한다.

<article>
 <h#>이러쿵저러쿵 #은 h1~h6 중 뭐 넣어야된다는거</h#>
</article>

 

1.  main 태그

main 태그 : 문서의 중요내용을 담는 태그,

익스플로러를 지원 안해줘서, role=main이라고 써줘야됨

<main role="main">

 

2.  블럭요소, 인라인요소

블럭요소, 인라인요소

1. 줄바꿈 현상이 있는가?

2. 공간을 만들 수 있는가? (width, height 사용 가능? 불가능?)

3. 상,하 배치가 가능한가? (margin, padding 가능? 불가능?)

 

대표적인 블럭요소 <p> 태그는 가능

대표적인 인라인요소 <a> 태그는 불가능

 

그러나, css 에서 display 값을 inline or block으로 바꿔준다면

<p>도 인라인요소가 될 수 있고, <a>도 블럭 요소가 될 수 있다.

또 inline-block으로 적용 시, 두 가지 요소를 다 살릴 수 있음.

 

 

3.  CSS 우선순위

• 동일한 선택자 사용 시, 나중에 적은 선택자가 우선순위 높음

html
<p>hello world</p>

css
p { color: blue;}
p { color: red;}
로 적으면 빨강이 나옴

• 디테일한 선택자 사용 시, 우선순위 높음

html
<header>
<p>hello world</p>
</header>

css
header p { color: red;}
p {color: blue;}

더 구체적으로 쓴 빨강이 나옴

• 스타일, 아이디, 클래스, 타입 순으로 우선순위 높----낮

 html
 <h3 style=“color: pink” id=“color” class=“color”> color </h3>

css
#color { color: blue; } 
.color { color: red; } 
h3 { color: green; }

그래도 결국 style에 적힌 핑크가 나옴

 

4.  padding 값 수정 유의

padding 값 수정 시, 전체 공간의 크기가 달라져 레이아웃이 틀어질 수 있으므로 유의해야 한다.

 

5.  margin, padding 초기화

html, body 태그는 기본적으로 margin, padding 값을 가지고 있어, 초기화하고 작업을 하는게 좋다.

보통 실무에서는 * {} 로 마진, 패딩값을 0으로 만들고 작업한다고 한다.

 

6.  vertical-align : middle

image 사용 시,

vertical-align: middle은 디폴트값으로 넣어줘야한다고하는데, 이유는 찾아보고있음.

 

7.  마진병합현상

형제지간일때, 숫자가 큰 값으로 적용

부모자식간일때, 자식 뿐 아니라 부모에도 영향을 미침.

그러니까 absolute이런거 쓰는거같은데 다음에 배울듯

 

googlee3a6d0f6316dde5a.html

0.00MB