2024. 3. 6. 19:45ㆍWeb, Django, DB
Web → 생각보다 큰 개념, 웹 사이트, 웹 어플리케이션에서 정보를 검색하고 상호 작용하는 기술
Web site : 인터넷에서 여러 개의 Web page가 모인 것으로, 사용자들에게 정보나 서비스를 제공하는 공간
Web page : HTML과 CSS 등의 웹 기술을 이용하여 만들어진, Web site 를 구성하는 하나의 요소
- Web page 구성요소
Structure → HTML
Styling → CSS
Behavior → Javascript
- HTML
= HyperText Markup Language
웹 페이지의 의미와 구조를 정의하는 언어
프로그래밍 언어는 아니다.
- HyperText
웹 페이지를 다른 페이지로 연결하는 링크
참조를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
- Markup Language
태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어
ex) HTML, Markdown
- HTML 구조
<!DOCTYPE html> : 해당 문서가 html로 나타낸 문서라는 것을 나타냄
<html></html> : 전체 페이지의 콘텐츠를 포함하는 최상단 태그
<title></title> : 브라우저 탭 및 즐겨찾기 시 표시되는 제목으로 사용
<head></head> : HTML 문서에 관련된 설명, 설정 등이다. 사용자에게 보이지 않음
<body></body> : 페이지에 표시되는 모든 콘텐츠, 보통 사용자들이 볼 수 있는 것들
크롬과 같은 브라우저가 위 문서를 해석한다.
- HTML Element(요소)
하나의 요소는 여는 태그와 닫는 태그 그리고 그 안의 내용으로 구성됨
닫는 태크는 태크 이름 앞에 슬래시가 포함되며 닫는 태그가 없는 태그도 존재함.
태그 사이의 내용을 content, 태그와 content를 포함해서 Element(요소)라고 한다.
- HTML Attributes (속성)
규칙 :
속성은 요소 이름과 속성 사이에 공백이 있어야 함
하나 이상의 속성들이 있는 경우엔 속성 사이에 공백으로 구분함
속성 값은 열고 닫는 따옴표로 감싸야 함
목적 :
나타내고 싶지 않지만 추가적인 기능, 내용을 담고 싶을 때 사용
CSS에서 해당 요소를 선택하기 위한 값으로 활용됨
- HTML Text structure
h1 요소는 단순히 텍스트를 크게 만드는 것이 아니라 현재 문서의 최상위 제목이라는 의미를 부여한다.
웹 관련해서 가장 신뢰성 높고 표준인 정보를 얻을 수 있는 곳
→ MDN
ex) html hi tag mdn 등으로 궁금한 정보 뒤에 MDN을 붙여서 검색하면 MDN 문서가 나온다.
- CSS (= Cascading Style Sheet)
html로 만든 구조에 살을 입혀준다!
웹 페이지의 디자인과 레이아웃을 구성하는 언어
- CSS Selectors
HTML 요소를 선택하여 스타일을 적용할 수 있도록 하는 선택자
- CSS Selectors 종류
기본 선택자 :
결합자 :
- Specificity ( 명시도 )
결과적으로 요소에 적용할 CSS 선언을 결정하기 위한 알고리즘
CSS Selector 에 가중치를 계산하여 어떤 스타일을 적용할지 결정
동일한 요소를 가리키는 2개 이상의 CSS 규칙이 있는 경우 가장 높은 명시도를 가진 Selector가 승리하여 스타일이 적용됨
- Cascade (계단식)
한 요소에 동일한 가중치를 가진 선택자가 적용될 때는 CSS에서 마지막에 나오는 선언이 사용됨
즉, 가중치가 동일할 때는 순서가 중요하다. 마지막에 나온 선언이 적용되기 때문!
- 명시도 높은 순
Inline 스타일 > 선택자 ( id 선택자 > class 선택자 > 요소 선택자 ) > 소스 코드 선언 순서
- !important
다른 우선순위 규칙보다 우선하여 적용하는 키워드
Cascade의 구조를 무시하고 강제로 스타일을 적용하는 방식이므로 사용을 권장하지 않음
- 속성은 되도록 ‘class’ 만 사용할 것
id, 요소 선택자 등 여러 선택자들과 함께 사용할 경우 우선순위 규칙에 따라 예기치 못한 스타일 규칙이 적용되어 전반적인 유지보수가 어려워지기 때문이다.
문서에서 단 한번 유일하게 적용될 스타일에 경우에만 “id 선택자” 사용을 고려한다.
즉, 가중치 계산을 신경쓰지 않도록 스타일을 통일하는 것이다.
- CSS 상속
기본적으로 CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속해 재사용성을 높임
- 상속되는 속성 :
- Text 관련 요소 (font, color 등)
- 상속되지 않는 속성 :
- 배치 요소들
MDN 각 속성별 문서 하단에서 상속 여부를 확인할 수 있다.
- HTML 관련 사항
요소(태그) 이름은 대소문자를 구분하지 않지만 “소문자” 사용을 권장
속성의 따옴표는 작은 따옴표와 큰 따옴표를 구분하지 않지만 “큰 따옴표” 권장
HTML은 프로그래밍 언어와 달리 에러를 반환하지 않기 때문에 작성 시 주의
- CSS 인라인 스타일은 사용하지 말 것
CSS와 HTML 구조 정보가 혼합되어 작성되기 때문에 코드를 이해하기 어렵게 만듦
- CSS의 모든 속성을 외우지 않는다.
자주 사용되는 속성은 그리 많지 않으며 주로 활용하는 속성 위주로 사용하다 보면 자연스럽게 익히게 된다.
그 외 속성들은 개발하며 필요할 때마다 검색해서 사용
권장 사항을 잘 지키자!
코드가 복잡해지는 것을 막고 유지보수를 용이하게 해준다.
'Web, Django, DB' 카테고리의 다른 글
| Django : Templates & URLs (1) | 2024.03.14 |
|---|---|
| Django & Design pattern (1) | 2024.03.12 |
| Responsive Web (0) | 2024.03.11 |
| BootStrap (0) | 2024.03.11 |
| CSS Layout (1) | 2024.03.07 |