- 3. Box Model 기초 2022.05.07
- 2. 클래스, 아이디, 주석 2022.05.06
- 1. html/css 기본 태그 2022.05.06
- 텍스트 관련 태그 2022.04.05
- HTML 기본 문서 만들기 2022.04.01
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style>
.p1 {
color: white;
border: 5px solid red;
padding: 15px;
background: black;
background-clip: content-box;
margin: 50px;
}
</style>
</head>
<body>
<h1>Loerem으로 채우기</h1>
<p class="p1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum unde inventore soluta? Temporibus impedit eius aliquid voluptates, deserunt ipsam nostrum, laudantium molestias odit repellendus maxime facilis possimus veritatis, atque architecto?</p>
</body>
</html>
이 문서를 보면 padding border margin을 이해할 수 있는데
실제 내용은 검은 바탕이고
padding은 빨간 선 안의 흰색 부분으로 내용과 테두리 사이의 공간이고
border은 빨깐 선이고
margin은 그 바깥의 흰 부분으로 다른 요소 사이의 여백 부분이다.
부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'CS > HTML CSS' 카테고리의 다른 글
| 5. border (0) | 2022.05.07 |
|---|---|
| 4. Margin, Padding (0) | 2022.05.07 |
| 2. 클래스, 아이디, 주석 (0) | 2022.05.06 |
| 1. html/css 기본 태그 (0) | 2022.05.06 |
| 텍스트 관련 태그 (0) | 2022.04.05 |
클래스
<p class="txt">세 번째 문단</p>
<p class="txt centered-txt">첫 번째 문단</p>
// 이렇게하면 두개 클래스 동시에 사용 가능.txt {
font-size: 64px;
color: blue;
}아이디
<p id="first-txt">첫 번째 문단</p>#first-txt{
color: blue;
}클래스와 아이디 차이
- 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없습니다.
- 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있습니다. (단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있습니다!)
결국
여러 요소를 스타일링 하고 싶으면 → class
한 요소만 스타일링 하고 싶으면 → id
주석
<!-- html 주석 -->/* css 주석 */
부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'CS > HTML CSS' 카테고리의 다른 글
| 4. Margin, Padding (0) | 2022.05.07 |
|---|---|
| 3. Box Model 기초 (0) | 2022.05.07 |
| 1. html/css 기본 태그 (0) | 2022.05.06 |
| 텍스트 관련 태그 (0) | 2022.04.05 |
| HTML 기본 문서 만들기 (0) | 2022.04.01 |
<!DOCTYPE html>
<title>웹사이트 타이틀</title>
<h1>제목1</h1>
<h2>숫자가 커질수록 작아진다</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><!DOCTYPE> 선언
HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 써야한다.
<title> 태그
페이지의 제목/ 브라우저 탭이나 방문 기록에 나와있는 제목임
<h1>~<h6> 태그
한 페이지에 여러 개의 머리말
<p> 태그
보통 문단은 <p>(paragraph) 태그 안에
<p> 태그 위, 아래에는 기본적으로 여백이 조금씩 있다.
<b> 태그
텍스트를 굵게
<i> 태그
텍스트 날려쓰기(italics)
Phrase Tags
<b> 태그는 그냥 텍스트를 '볼드체'로 만들어주고, 마찬가지로 <i> 태그는 그냥 텍스트를 '이탤릭체'로 만들어준다. 둘 다 '시각적인 특징'만 갖고 있는 태그
HTML에서는 의미도 담고 있는 phrase tag가 있다.
<strong> 태그
<b> 태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong> 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적
스크린리더(컴퓨터의 화면 낭독 소프트웨어: 시각 장애인, 학습/인지 장애인, 노인, 다문화 가정의 웹 접근성을 지원해주는 목적)가 글을 읽어줄 때 <strong>은 강조해서 읽음
<em> 태그
<i> 태그는 그냥 시각적으로 날려쓰는 것이 목적이라면, <em> 태그는 강조하는 것이 목적. em은 'emphasized'의 줄임말
텍스트 정렬
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<style>
h1 {
text-align: left;
}
h2 {
text-align: right;
}
h3 {
text-align: center;
}
</style>
텍스트 색
<h1>Heading 1</h1>
<style>
h1 {
color: red;
}
여백
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<style>
h1 {
margin-bottom: 50px;
}
h2 {
margin-left: 70px;
}
부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'CS > HTML CSS' 카테고리의 다른 글
| 4. Margin, Padding (0) | 2022.05.07 |
|---|---|
| 3. Box Model 기초 (0) | 2022.05.07 |
| 2. 클래스, 아이디, 주석 (0) | 2022.05.06 |
| 텍스트 관련 태그 (0) | 2022.04.05 |
| HTML 기본 문서 만들기 (0) | 2022.04.01 |
http://www.yes24.com/Product/Goods/96674934
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - YES24
웹 분야 1위! 그만한 이유가 있다!키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다!웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹
www.yes24.com
⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟ 책을 공부하며 요약・정리한 내용입니다.
<hn>
(heading) 제목을 나타냄
<h1>이 가장 크고 <h2>, <h3>, <h4>, <h5>, <h6>순으로 크기가 작아짐
e.g.
<h1>불고기</h1>
<h2>불고기 레시피</h2>
<h3>상품 구성</h3>
실행 결과
<p>
단락을 입력함
<p>태그 사이에 앞뒤로 개행한다.
편집기의 <p>태그 내에서 개행을 하더라도 웹 브라우저에서는 한줄로 표시된다.
<br>
개행을 시켜줌
e.g.
<h1>불고기</h1>
<p>고기를 썰어 양념으로 재운 뒤 구워 먹는
한국 요리 중 하나이다.</p>
<p>고기를 양념에 재우고<br>센 불에 올려 양념한 고기를 넣고
익히면서 볶아준다.</p>
<!-- html 문서에서 개행해도 웹 브라우저에서는 한 줄로 표시 -->
실행 결과
<blockquote>
인용할 때 사용하는 태그로 브라우저가 인용문을 인식할 수 있도록 사용
<h1>불고기</h1>
<p>고기를 썰어 양념으로 재운 뒤 구워 먹는
한국 요리 중 하나이다.</p>
<p>고기를 양념에 재우고<br>센 불에 올려 양념한 고기를 넣고 익히면서 볶아준다.</p>
<blockquote>
불고기는 고려시대 요리인 설하멱과 비슷한 형태의 요리라고 한다.
</blockquote>
실행 결과
<strong>, <b>
둘다 텍스트를 굵게 표시할 때에 사용
<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>
<strong>태그, <b> 태그는 차이가 느껴지지 않지만 경고나 주의 사항처럼 중요한 내용을 강조할 때는 <strong> 태그를 사용하고
단순히 글자만 굵게 표시할때는 <b> 태그 사용
보이는 것이 아니라 의미 중심인것이다.
HTML은 웹의 구조를 담당한다! 웹의 시각적인 표현은 CSS에게!
<h1>불고기</h1>
<p>고기를 썰어 양념으로 재운 뒤 구워 먹는
한국 요리 중 하나이다.</p>
<p>고기를 양념에 재우고<br>센 불에 올려 양념한 고기를 넣고 익히면서 볶아준다.</p>
<p><b>불고기</b>는 고려시대 요리인 <strong>설하멱</strong>과 비슷한 형태의 요리라고 한다.</p>
실행 결과
<em>, <i>
<em> 태그와 <i> 태그는 텍스트를 기울여 표시할 때 사용
<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>
<em>태그는 emphasis의 줄임말
문장에서 특정 부분을 강조하고 싶을 때 사용
<i>태그는 italic의 줄임말
생각이나 용어, 관용구 등에서 사용
e.g.
<h1>불고기</h1>
<p>고기를 썰어 양념으로 재운 뒤 구워 먹는
<i>한국 요리</i> 중 하나이다.</p>
<p>고기를 양념에 재우고<br>센 불에 올려 양념한 고기를 넣고 익히면서 볶아준다.</p>
<p><b>불고기</b>는 <em>고려시대 요리</em>인 <strong>설하멱</strong>과 비슷한 형태의 요리라고 한다.</p>
실행 결과
다양한 텍스트 관련 태그
| 종류 | 설명 | 예시 |
| <cite> | 참고 내용 표시 | <p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>’비포선셋’</cite>중</p> |
| <code> | 컴퓨터 인식을 위한 코드 | <code>function savetheLocal()</code> |
| <small> | 작게 표시해도 되는 택스트 | <p> 가격 13,000원 <small>(부가세 별도)</small></p> |
| <sub> | 아래 첨자 표시 | <p> 물의 화학식: H<sub>2</sub>O</p> |
| <sup> | 위 첨자 표시 | <p>E=mc<sup>2</sup></p> |
| <s> | 취소선 표시 | <p><s>30%</s>40%</p> |
| <u> | 밑줄 표시 | <u>텍스트에 밑줄 긋기</u> |
| <ins> | 공동 작업 문서에서 새로운 내용 삽입 | <ins>새로운 내용 삽입</ins> |
| <del> | 공동 작업 문서에서 기존 내용 삭제 | <del>기존 내용 삭제</del> |
부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'CS > HTML CSS' 카테고리의 다른 글
| 4. Margin, Padding (0) | 2022.05.07 |
|---|---|
| 3. Box Model 기초 (0) | 2022.05.07 |
| 2. 클래스, 아이디, 주석 (0) | 2022.05.06 |
| 1. html/css 기본 태그 (0) | 2022.05.06 |
| HTML 기본 문서 만들기 (0) | 2022.04.01 |
http://www.yes24.com/Product/Goods/96674934
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - YES24
웹 분야 1위! 그만한 이유가 있다!키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다!웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹
www.yes24.com
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 책을 공부하며 요약・정리한 내용입니다.
HTML(Hyper Markup Language)이란?
: 웹 문서를 만드는 언어
하이퍼텍스트(HyperText)
: 문서를 서로 연결해주는 링크
HTML 문서의 기본 구조
<!DOCTYPE html> <!-- 1 -->
<html lang="ko"> <!-- 2 -->
<head> <!-- 3 -->
<meta charset="UTF-8"> <!-- 4 -->
<title>HTML 기본 문서</title> <!-- 5 -->
</head>
<body> <!-- 6 -->
<h1>프런트엔드 웹 개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>
- <!DOCTYPE html> : 문서 유형(document type)을 지정하는 태그, HTML5 언어로 작성한 문서임을 나타냄
- <html>~</html> : 웹 문서의 시작과 끝을 나타내는 태그, </html> 태그 뒤에는 아무 내용도 없어야 한다.
- <head>~</head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분
- <meta> : 웹 문서와 관련된 정보를 지정할때 사용, 여기서는 UTF-8 인코딩 방식을 지정
- <title> : 문서 제목을 나타내는 태그
- <body>~</body> : 실제 웹 브라우저에 나타내는 내용
3.4. 시맨틱 태그
HTML 태그는 이름만 봐도 의미를 알 수 있어 시맨틱(semantic) 태그 라고 한다.
시맨틱 태그가 필요한 이유
- 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 인지 쉽게 알 수 있기 때문
- 문서의 구조가 정확히 나눠지므로 다양한 기기에서 웹 문서를 표현하기 쉽다.
- 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 본문 내용을 검색해야 할때 메뉴나 푸터 영역이 아니라 본문 영역 안에서만 검색 가능
주요 시맨틱 태그
<header>
헤더 영역 의미
<nav>
링크를 만듬
e.g.
<header>
<div id="logo"> <!-- 로고 영역 -->
<a href="#"><h1>Dream Jeju</h1></a>
</div>
<nav> <!-- 네비게이션 영역 -->
<ul id="topMenu">
<li><a href="#">단체 여행</a></li>
<li><a href="#">맞춤 여행</a></li>
<li><a href="#">갤러리</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</nav>
</header>
<main>
웹 문서에서 핵심이 되는 내용 메뉴, 사이드 바, 로고 처럼 페이지 마다 똑같이 들어간 정보는 넣지 않고 웹 문서마다 다르게 보여주는 내용으로 구성.
<article>
웹에서 실제로 보여주고 싶은 내용으로 구성
예를 들어 블로그의 포스트, 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목
<section>
콘텐츠 영역을 나타냄
<section>태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고
<article>태그는 독립된 콘텐츠로 쓴다.
단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <div>태그 사용
e.g.
<main class="contents">
<!-- 두개의 <section>태그로 영역을 나눔 -->
<section id="headling">
<h2>몸과 마음이 치유되는 섬</h2>
</section>
<section id="activity">
<h2>다양한 액티비티가 기다리는 섬</h2>
</section>
</main>
<aside>
사이드 바른 만듬 필수 요소는 아니고 필요한 경우에만 사용
<footer>
웹 문서 맨 아래쪽에 푸터 영역을 만듬 푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣는다.
e.g.
<footer>
<div id="bottomMenu">
<ul>
<li><a href="#">회사 소개</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">여행약관</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
</div>
</footer>
<div>
여러 소스를 묶는데 사용 <div id=”header”>, <div class=”detail”> 이렇게 id나 class 속성을 사용해 문서 구조를 만들거나 스타일을 적용할 때 사용
e.g.
<header>
<div id="logo">
<a href="#"><h1>Dream Jeju</h></a>
</div>
</header>
부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'CS > HTML CSS' 카테고리의 다른 글
| 4. Margin, Padding (0) | 2022.05.07 |
|---|---|
| 3. Box Model 기초 (0) | 2022.05.07 |
| 2. 클래스, 아이디, 주석 (0) | 2022.05.06 |
| 1. html/css 기본 태그 (0) | 2022.05.06 |
| 텍스트 관련 태그 (0) | 2022.04.05 |