클라우딩 어플리케이션 엔지니어링 TIL Day 4 (2)

# 단위

고정 단위

소수점 사용 X 권장

px : 픽셀은 정확한 크기를 나타내야 할 때 사용, 가장 일반적으로 사용

pt : 일반적으로 문서 등에서 사용, 웹에서 자주 사용되지는 않음

 

상대 길이 단위

브라우저 기본값 16px

em : 요소의 글꼴 크기에 상대적인 단위, 합성 값, line-height, letter-spacing 등에서 주로 사용

div {
  font-size: 50px;
}

div p {
  font-size: 1em;
}

div p a {
  font-size: 2em;
}

rem : 합성을 피하기 위해서 만들어진 단위, 전반적인 레이아웃, 폰트 크기 작업 을 할 때 많이 쓰임

div {
  font-size: 50px;
}

div p {
  font-size: 1rem; /*16px 기준*/
}

div p a {
  font-size: 2rem;
}

% : 부모의 크기에 따라 상대적으로 백분율

vw : 화면의 너비, 가로에 따라 결정, 브라우저 크기가 조정되면 같이 조정, 무조건 너비

vh : 화면의 높이에 따라 결정, 무조건 높이

vmin : 화면에서 가장 작은 크기에 따라 결정, 너비와 높이 중 제일 작은 것 기준

vmax : 화면에서 가장 큰 크기에 따라 결정, 너비와 높이 중 제일 큰 것 기준

---

# 폰트

글꼴 꾸미기

• font-size : 글자 크기 변경
• font-family : 글씨체 변경, 콤마를 기준으로 여러 개의 글씨체 동시 지정, 지정한 순서대로 글꼴 적용
• font-weight : 글짜 두께 변경
• color : 글자 색상 변경
• text-align : 글자의 가로 정렬 변경
• line-height : 글자의 줄간격 변경
• letter-spacing : 자간 변경

배경 꾸미기

• background-color : 배경 색 지정
• background-image : 배경 이미지 정의
• background-repeat : 배경 이미지 반복 지정
• background-size : 배경 이미지의 크기 지정
• background-position : 배경 이미지의 위치 제어
• background : 모든 배경 꾸미기 속성 적용, 위치와 크기 속성 사이에 "/" 꼭 넣기

---

# 박스 모델

크기 지정

width, height : 박스의 너비, 높이 지정, 블록 레벨 요소

max-width, max-height : 박스의 최대 너비, 최대 높이 지정, 블록 레벨 요소

margin : 박스의 외부 여백 지정

padding : 박스의 내부 여백 지정

 

여백(마진) 상쇄 : 요소 간의 외부 여백이 상쇄(결합)되는 현상

인접 형제 간의 외부 여백 상쇄, 제일 큰 여백을 따라감

부모와 자식 요소의 여백을 분리할 권한이 없을 경우 상쇄 발

- 부모와 자식을 분리하는 방법

1. 부모에 테두리(border) 넣기
2. 부모와 자식 사이에 콘텐츠 넣기
3. 부모에 내부 여백 padding 넣기

빈 블록은 상쇄 발생 -> 테두리, 여백, 콘텐츠, 높이가 없는 빈 블록은 마진 상쇄 발생

---

# 마크업 실전 활용 특강 정리

 

영역 구분 태그 바로 쓰기

<div> : 단순 영역 구분, 단순하게 UI 적 구분을 할 때 사용

<section> : 영역을 구분하되, 의미가 있는 영역 구분 시 사용, 헤딩 태그 필수로 들어가야 함

<article> : 독립성을 가진 콘텐츠를 나눌 때 사용, 하나의 리스트, 카드 등을 구현할 때 사용

# section 태그와 article 태그 둘 다 의미가 있는 태그인데 어떻게 구분하지?
article 태그는 독립성을 가진 컨텐츠
section 태그는 구역을 나누는 태그, div보다는 의미를 가지며 무조건 헤딩 태그를 가져야 함
section 태그 안에 article 태그, article 태그 안에 section 태그 와 같이 구성해도 괜찮음 (헤더는 겹치면 X)

article이 신문 내의 자잘한 기사(기사 제목, 기자 이름, 기자 이메일 등)를 뜻하면, section은 주제별 기사를 모아둔 영역(종종 라인을 그어서 별도의 칸으로 분리해두기도 함)로 이해하자

# 리스트 구성 TIP
ul, li 태그를 주로 사용 + a 태그로 링크 연결
리스트를 만들 때에는 dt, dd 사용 잘 안 함 ==>  태그 자체의 역할이 단어를 정의하거나 설명을 더하는 태그이기 때문

# 시안별 TIP
햄버거바 -> a태그 보다는 버튼 태그 쓰기
a태그 역할 -> 눌렀을 때 페이지의 전환이 일어나야 함
버튼태그 역할 -> 눌렀을 때 액션, 동작이 실행되어야 함
둘의 역할을 잘 구분해서 필요할 때 적절하게 사용하자

footer 부분에도 제목을 넣자

header 안에 h1 태그로 제목을 nav 태그로 메뉴들 표시 -> 검색엔진이 바로 파악할 수 있음

검색바 -> form 태그 type="submit" 으로 하는 것 추천
브라우저들이 알아서 맞춰줌
type을 꼭 잘 맞춰주자

없어도 무방한 것들, 부가정보 -> aside 태그 사용

# 문서화 구조가 뭘까?
하나의 페이지, html은 하나의 워드 문서와 같은 것이라 문서화 구조를 지켜주어야 함
문서화 구조를 잘 지키면 검색엔진이 잘 파악할 수 있음
각 영역에 적절한 태그를 사용면 검색엔진이 바로 바로 파악할 수 있음

검색 엔진이 바로 파악하면 뭐가 좋을까?

- 검색 엔진 최적화 SEO 점수가 높아짐
- CSS가 깨져도 어떤 영역에 무엇이 있는지 시각적으로 파악하기 쉬움

=> 어떤 태그를 쓰느냐에 따라서 검색엔진이 이해할 수 있는지가 달라지니까 의미가 있는지, 강조를 해야하는지 등등에 따라서 적절한 태그를 쓰는 것이 중요함

시멘틱 마크업 -> 의미있는 마크업을 쓰자

---

# 알아두면 좋은 것

* 디비티스 divitis를 조심하자
디비티스란? div를 많이 사용하는 것
div를 줄일 수 있으면 줄이는 것이 좋음
왜 그럴까??
프로젝트 규모가 커지고 코드가 길어질수록 블록의 단위 파악이 어려워짐
코드 가독성이 떨어짐

TIP : 바둑판식 배열 만들 때는 grid 쓰자


* 젠코딩 emmet
단축키의 느낌, 자동완성, 약어
빠르고 편하게 만들 수 있음

* 다양한 확장프로그램 사용
- HTML5 Outliner 
- Perfect Pixel
- Wappalyzer

---

# 새로 알게 된 것

시멘틱한 마크업을 왜 지켜야 하는지에 대해서 확실하게 알 수 있었다

HTML을 구성할 때 적절한 태그를 적절한 영역에 잘 사용할 수 있도록 많은 연습이 필요할 것 같다

CSS는 너무 종류도 많고 다양해서 정말 꾸준히, 계속, 다양하게 써보면서 익혀야겠다