Web
Web
- Web site, Web application 등을 통해 사용자들이 정보를 검색하고 상호 작용하는 기술
Web site
- 인터넷에서 여러 개의 Web page가 모인 것으로, 사용자들에게 정보나 서비스를 제공하는 공간
Web page
- HTML, CSS 등의 웹 기술을 이용하여 만들어진, Web site를 구성하는 하나의 요소
- HTML -> Structure, CSS -> Styling, Javascript -> Behavior
HTML
HTML이란?
- HyperText Markup Language
- 웹 페이지의 의미와 구조를 정의하는 언어
- HyperText : 웹 페이지를 다른 페이지로 연결하는 링크
- 참조를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
- Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어
HTML 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>My page<title>
</head>
<body>
<p>This is my page</p>
</body>
</html><!DOCTYPE html>: 해당 문서가 html 문서라는 것을 나타냄<html> </html>: 전체 페이지의 콘텐츠를 포함<title> </title>: 브라우저 탭 및 즐겨찾기 시 표시되는 제목으로 사용<head> </head>- HTML 문서에 관련된 설명
- 사용자에게 보이지 않음
<body> </body>: 페이지에 표시되는 모든 콘텐츠
HTML 구조 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>My page<title>
</head>
<body>
<p>This is my page</p>
# <!---- anchor (하이퍼 텍스트) -->
<a href="https://www.google.co.kr/">Google</a>
<img src = "images/sample.png" alt = "sample-img">
<img src = "https://random.imagecdn.app/500/150/" alt = "sample-img">
</body>
</html>Text structure
Text structure
- HTML의 주요 목적 중 하나는 텍스트 구조와 의미를 제공하는 것
HTML
- 웹 페이지의 의미와 구조를 정의하는 언어
HTML Text Structure 예시
<body>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>This is my page</p>
<p>This is <em>empasis</em></p>
<p>Hi <strong>my name</strong> is Air</p>
<ol>
<li>파이썬</li>
<li>알고리즘</li>
<li>웹</li>
</ol>
</body>웹스타일링
CSS
- 웹 페이지의 디자인과 레이아웃을 구성하는 언어
- 기본적으로 CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속해 재사용성을 높임
h1 {
color:blue;
font-size: 30px;
}CSS 적용방법
- 인라인(INline) 스타일
- HTML 요소 안에 style 속성 값으로 작성
- 내부(Internal) 스타일 시트
- head 태그 안에 style 태그에 작성
- 외부(External) 스타일 시트
- 별도의 CSS 파일 생성 후 HTML link 태그를 사용해 불러오기
CSS Selectors
- HTML 요소를 선택하여 스타일을 적용할 수 있도록 하는 선택자
- 기본 선택자
- 전체("*") 선택자
- HTML 모든 요소를 선택
- 요소(tag) 선택자
- 지정한 모든 태그를 선택
- 클래스(class) 선택자
- 주어진 클래스 속성을 가진 모든 요소를 선택
- 아이디(id) 선택자
- 주어진 아이디 속성을 가진 요소 선택
- 무문서에는 주어진 아이디를 가진 요소가 하나만 있어야 함
- 속성(attr) 선택자 등
- 전체("*") 선택자
- 결합자 (Combinators)
- 자손 결합자(" "(space))
- 자식 결합자(">")
<body>
<h1 class = "green">Main Heading</h1>
<h2>선택자 연습</h2>
<h3>Hello</h3>
<h4>Nice to meet you</h4>
<p id="purple">과목 목록</p>
<ul class = "green">
<li>파이썬</li>
<li>알고리즘</li>
<li>웹
<ol>
<li>HTML</li>
<li>CSS</li>
<li>PYTHON</li>
</ol>
</li>
</ul>
<p class = "green">Lorem, <span>ipsum</span>dolor.</p>
</body><style>
/* 전체 선택자 */
*{
color:red
}
/* 타입 선택자 */
h2 {
color:orange;
}
/* 클래스 선택자 */
.green{
color:green;
}
/* id 선택자 */
#purple {
color:purple;
}
</style>
명시도
Specificity
- 결과적으로 요소에 적용할 CSS 선언을 결정하기 위한 알고리즘
- CSS Selector에 가중치를 계산하여 어떤 스타일을 적용할지 결정
- 동일한 요소를 가리키는 2개 이상의 CSS 규칙이 있는 경우 가장 높은 명시도를 가진 Selecotr가 승리하여 스타일이 적용됨
Cascade
- 한 요소에 동일한 가중치를 가진 선택자가 적용될 때 CSS에서 마지막에 나오는 선언이 사용됨
사용 예시
- Cascade 예시
h1 {
color:red;
}
h1 {
color:purple;
}- 명시도 적용 예시
.make-red {
color: red;
}
h1 {
color: purple;
}명시도가 높은 순
- importance
- 다른 우선순위 규칙보다 우선하여 적용하는 키워드
- Inline 스타일
- 선택자
- id 선택자 > class 선택자 > 요소 선택자
- 소스 코드 선언 순서
데이터 분석에서 백엔드까지...