한 걸음씩
[Web] Fundamentals of HTML and CSS 본문
'web page' ⊂ 'web site' ⊂ 'web'
1. Structuring the web
- HTML(HyperText Markup Language) : 웹 페이지의 의미와 구조를 정의하는 언어
- Hypertext
- 웹 페이지를 다른 페이지로 연결하는 링크
- 참조를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
- Markup Language
- 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어
► HTML Element
- 하나의 요소를 여는 태그와 닫는 태그 그리고 그 안의 내용으로 구성됨
- 닫는 태그는 태그 이름 앞에 슬래시가 포함되며 닫는 태그가 없는 태그도 존재
► HTML Attribute
- 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 함 (p와 class사이)
- 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백으로 구분함
- 속성 값은 열고 닫는 따옴표로 감싸야함 ("editor-note")
- 나타내고 싶지 않지만 추가적인 기능, 내용을 담고 싶을 때 사용
- CSS가 해당 요소를 선택하기 위한 값으로 활용됨
► HTML 문서의 구조
<!-- ! + Tab html 구조 자동 완성 -->
<!DOCTYPE html> <!-- 해당 문서가 html로 문서라는 것을 나타냄 -->
<html lang="en"> <!-- 전체 페이지의 콘텐츠를 포함 -->
<head> <!-- HTML문서에 관련된 설명,설정 등 / 사용자에게 보이지 않음 -->
<meta charset="UTF-8">
<title>My page</title> <!-- 브라우저 탭 및 즐겨찾기 시 표시되는 제목으로 사용 -->
</head>
<body> <!-- 페이지에 표시되는 모든 콘텐츠 -->
<p>This is my page</p>
</body>
</html>
► HTML Text structure
<body> <!-- 페이지에 표시되는 모든 콘텐츠 -->
<h1>메인 제목</h1> <!-- <h1>은 해당 문서의 '최상위 제목'이라는 의미 부여 -->
<h2>중제목</h2>
<!-- <p>태그는 문장을 쓸 때 사용 -->
<!-- <br>태그는 개행할 때 사용 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
tenetur pariatur. Soluta, dolor sed necessitatibus rem ipsa quisquam eius nostrum <br>
aut voluptas ea esse officiis omnis facere veritatis in provident?</p>
<p>이건 <em>emphasis</em> 입니다.</p> <!-- <em>태그는 글자를 기울임 -->
<p>이건 <strong>strong</strong> 입니다.</p> <!-- <strong>태그는 글자를 bold -->
<ul> <!-- unordered list -->
<li>파이썬</li>
<li>알고리즘</li>
<li>DB</li>
</ul>
<ol> <!-- ordered list -->
<li>파이썬</li>
<li>알고리즘</li>
<li>DB</li>
</ol>
</body>
► HTML image, url structure
<body> <!-- 페이지에 표시되는 모든 콘텐츠 -->
<!-- <a>태그는 url 주소 첨부 시 사용 -->
<a href="https://www.google.co.kr/">구글 바로가기</a> <!-- a + Tab 자동완성 -->
<!-- <img>태그는 이미지 첨부 시 사용 -->
<img src="/Users/daeun/Downloads/TikTok.jpeg" alt="짱구사진"> <!-- img + Tab 자동완성 -->
<img src="https://source.unsplash.com/random" alt="랜덤이미지">
<!-- alt : 스크린 리더 기능 -->
</body>2. Styling the web
- CSS(Cascading Style Sheet) : 웹 페이지의 디자인과 레이아웃을 구성하는 언어
- CSS 적용 방법
- 인라인(Inline) 스타일 : <body> 태그에 작성, 아래 사진과 같은 형태, 사용자제(가독성 down, 유지보수 힘듦)
- 내부(Internal) 스타일 시트 : <head> 태그 내부에 다음과 같이 코드를 작성
<head> <!-- HTML문서에 관련된 설명,설정 등, 사용자에게 보이지 않음 -->
<style>
h1 {
color: blue;
}
</style>
</head>- 외부(External) 스타일 시트 : 별도의 CSS 파일 생성 후 <head> 태그 내부에 아래 코드와 같이 작성
<head>
<link rel="stylesheet" href="style.css">
</head>
► CSS Selectors
- HTML 요소를 선택하여 스타일을 적용할 수 있도록 함
- 기본 선택자
- 전체(*) 선택자
- 요소(tag) 선택자
- 지정한 모든 태그 선택
- 클래스(class) 선택자
- 주어진 클래스 속성을 가진 모든 요소를 선택
- ex) .index는 class="index"를 가진 모든 요소를 선택
- 아이디(id) 선택자
- 주어진 아이디 속성을 가진 요소 선택
- 문서에는 주어진 아이디를 가진 요소가 하나만 있어야 함 (class와 기능상 같지만 의미상 구분하는 것)
- ex) #index는 id='index'를 가진 요소를 선택
- 유지보수가 어렵기 때문에 문서에서 단 한번 유일하게 적용될 스타일에만 id선택자 사용할 것
- 속성(attr) 선택자
- 결합자(Combinators)
- 자손 결합자(" " (space))
- 첫 번째 요소의 자손 요소들 선택
- ex) p span은 <p> 안에 있는 모든 <span>를 선택 (하위 레벨 상관없이)
- 자식 결합자 (>)
- 첫 번째 요소의 직계 자식만 선택
- ex) ul > li은 <ul> 안에 있는 모든 <li>를 선택 (한 단계 아래 자식들만)
- 자손 결합자(" " (space))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 전체 선택 */
* {
color: red;
}
/* 요소 선택자 */
h2{
color: orange;
}
h3,h4{
color: blue;
}
/* class */
.green{
color: green;
}
/* id */
#purple{
color: purple;
}
/* 자식 결합자 */
/* 바로 한 단계 아래에 있는 것 */
.green > span {
font-size: 50px;
}
/* 자손 결합자 */
/* 본인보다 아래에 있는 모든 것 */
.green li{
color: palevioletred
}
</style>
</head>
<body>
<h1 class="green">Heading</h1>
<h2>선택자 연습</h2>
<h3>헬로</h3>
<h4>반가워요</h4>
<p id="purple">과목 목록</p>
<ul class="green">
<li>파이썬</li>
<li>알고리즘</li>
<li>웹
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</li>
</ul>
<p class="green">Lorem <span>ipsum</span> dolor.</p>
</body>
</html>
💡전체 선택 글자 색상을 red로 했는데 다른 글자들 색상이 왜 변경이 됐을까?
► Cascade & Specificity
- Cascade 계단식 & Specificity 우선순위
- 동일한 요소에 적용가능한 같은 스타일을 두 가지 이상 작성 했을 때 어떤 규칙이 이기기지 결정하는 것
- Cascade (계단식)
- 동일한 우선순위를 같은 규칙이 적용될 때 CSS에서 마지막에 나오는 규칙이 사용
- Specificity (우선순위)
- 선택자 별로 정해진 우선순위 점수에 따라 점수가 높은 규칙이 사용
- ! importance : cascade 구조 무시하고 모든 우선순위 무효화, 사용 자제
- 인라인 스타일 > id 선택자 > class 선택자 > 요소 선택자
- 만약 같은 태그에 class 선택자가 두 개가 있다면 최근에 작성한 것이 적용됨
- inheritance (상속)
- 기본적으로 CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속함
- 코드의 재사용성을 높임
- 상속되는 속성 : text 관련 요소 (font, color 등)
- 상속되지 않는 속성 : Box model, position 관련 요소 (width, margin, position 등)
https://developer.mozilla.org/ko/docs/Web/CSS
CSS: Cascading Style Sheets | MDN
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌
developer.mozilla.org
∟ web 관련 자료는 반드시 MDN에서 공부할 것!
∟ HTML / CSS / JS
'Web' 카테고리의 다른 글
| [Web] Semantic Web (0) | 2023.03.02 |
|---|---|
| [Web] Flexible box for CSS layout (1) | 2023.02.28 |
| [Web] Floating for CSS layout (0) | 2023.02.28 |
| [Web] Positioning for CSS layout (0) | 2023.02.27 |
| [Web] The box model (0) | 2023.02.23 |
'Web' Related Articles
more
