웹 서비스에 대해 공부하기 앞서 HTML, CSS를 간략하게 짚어보자
HTML
마크업 언어 : 문서의 요소를 태그를 이용해 정의 (NOT PL)
브라우저에게 웹 페이지를 어떻게 구성할지 기술하는 언어
문법
- 중첩태그 가능
- 블록 단위 요소 (display:block) : 항상 새 줄에서 시작, 가능한 너비 모두 차지
- 인라인 요소 (display:inline) : 새 줄에서 시작 X, 필요한 만큼만 너비 차지
- 인라인 블록 (display:inline-block) : 새 줄에서 시작 X (인라인특징), 너비와 높이 가짐 (블록특징)
1) 블록 요소
웹 페이지를 나타내는 구조적 요소 (단락, 목록, 탐색메뉴, 바닥글, ...)
인라인 요소 안에 중첩불가, 다른 블록 요소 안에 중첩가능
2) 인라인 요소
블록 레벨 요소 안에 존재 (주로 텍스트의 구문 : <a>, <em>, <strong>, ...)
- Void 요소
Single tag, 닫는 태그 없음. 문서에 삽입/ 첨부하는 경우 (<img>, <embed>, ...)
<img src="sample.png">
- 속성
요소에 대한 추가정보 제공 (id, disabled, onclick, ....)
<div id="hello"></div>
<html> : 모든 html 요소를 감싸는 역할
<meta> : 웹 페이지의 charset 지정 (utf-8)
주석 : <!-- ○○○ -->
CSS
<style></style> : HTML 콘텐츠와 외부 스타일을 구성
선택자와 선언부로 구성
- 선택자 : h1
- 조상 자손 선택자 : ul 아래의 모든 태그 선택, 적용 (ul li)
- 부모 자식 선택자 : 선택한 것 바로 밑의 선택자만 선택, 적용 (#lecture>li)
- 동시 선택자 : 해당하는 두개의 태그를 동시 선택, 적용 (ul, ol)
- 선언부 : {color: blue; font-size: 12px; }
- id속성 : 유일한 하나의 HTML element에만 적용 ( #id값 )
- class 속성 : 같은 클래스 내 모든 요소들 속성 변경 ( .id값 )
Reference
실용적인 웹 프로그래밍 - 인프런 | 학습 페이지
지식을 나누면 반드시 나에게 돌아옵니다. 인프런을 통해 나의 지식에 가치를 부여하세요....
www.inflearn.com
반응형
'Web > 실습' 카테고리의 다른 글
| 웹 서비스 다뤄보기 (2) - JavaScript와 DOM (2) | 2021.05.12 |
|---|---|
| 크롤링 (2)-환경설정 : pip 라이브러리, requests, BeautifulSoup (0) | 2021.05.10 |
| 크롤링 (1)-개념 및 방식 (0) | 2021.05.03 |