Web - HTML/CSS

Web

: Web site, Web application 등을 통해 사용자들이 정보를 검색하고 상호 작용하는 기술

HTML (HyperText Markup Language)

: 웹 페이지의 의미와 구조를 정의하는 언어

• Hypertext: 웹 페이지를 다른 페이지로 연결하는 링크. 참조를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
• Markup Language: 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 ex) HTML, Markdown
  

HTML 구조

HTML Element(요소)

HTML Attributes(속성)

HTML 구조 예시

• ctrl+shift+i로 확인해보기!
  

• tip! >> 검색 시 'html h1 tag mdn'

CSS (Cascading Style Sheet)

: 웹 페이지의 디자인과 레이아웃을 구성하는 언어

CSS 구문

CSS 적용 방법

1. 인라인(Inline) 스타일 => 권장 X (재사용성 떨어지고 유지보수가 어려워짐)
   : HTML 요소 안에 style 속성 값으로 작성
   

2. 내부(Internal) 스타일 시트
   : head 태그 안에 style 태그에 작성
   

3. 외부(External) 스타일 시트
   : 별도의 CSS 파일 생성 후 HTML link 태그를 사용해 불러오기
   

CSS 선택자 (중요!!)

: HTML 요소를 선택하여 스타일을 적용할 수 있도록 하는 선택자

CSS Selectors 특징

• 기본 선택자

1. 전체 선택자 (*): HTML 모든 요소를 선택
2. 요소(tag) 선택자: 지정한 모든 태그를 선택
3. 클래스(class) 선택자 (.): 주어진 클래스 속성을 가진 모든 요소를 선택 (권장)
4. 속성(id) 선택자 (#): 주어진 아이디 속성을 가진 요소 선택. 문서에는 주어진 아이디를 가진 요소가 하나만 있어야 함.

• 결합자

1. 자손 결합자 (" "): 첫 번째 요소의 자손 요소들 선택. 하위 레벨 상관 X
2. 자식 결합자 (>): 첫 번째 요소의 직계 자식만 선택. 한 단계 아래 자식들만

명시도 (Specificity)

: 결과적으로 요소에 적용할 CSS 선언을 결정하기 위한 알고리즘

• Cascade(계단식): 한 요소에 동일한 가중치를 가진 선택자가 적용될 때 CSS에서 마지막에 나오는 선언이 사용됨
  ex) h1 태그 내용의 색은 purple이 적용됨
  

• 명시도 적용 예시
  ex) 동일한 h1 태그에 다음과 같이 스타일이 작성된다면 h1 태그 내용의 색은 red가 적용됨
  

명시도 순서

1. Importance: !important
   => 다른 우선순위 규칙보다 우선하여 적용하는 키워드
   *Cascade 구조를 무시하고 강제로 스타일을 적용하는 방식이므로 사용을 권장하지 않음.
2. Inline 스타일
3. 선택자 (id > class > 요소)
4. 소스 코드 선언 순서

CSS 상속

: 기본적으로 CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속해 재사용성을 높임

• 상속되는 속성
  : Text 관련 요소(font, color, text-alig), opacity, visibility 등
• 상속되지 않는 속성
  : Box model 관련 요소(width, height, border, box-sizing...) & position 관련 요소(position, top/right/bottom/left, z-index 등)