[Web] HTML & CSS

1. HTML과 CSS

HTML: Hyper Text Markup Language의 약자

Hyper Text(하이퍼텍스트)는 링크로 연결된 페이지,

Markup Language(마크업 언어)는 태그 등을 이용해서 문서를 작성하도록 도와주는 언어를 의미한다.

확장자명은 .html이다.

CSS: Cascading Style Sheets의 약자

웹 페이지의 전반적인 스타일을 작성해 저장해두는 시트를 의미한다.

확장자명은 .css이다.

2. HTML의 기본 형태

XHTML과 HTML5

XHTML이란, 웹 페이지를 제작하기 위해 사용되는 HTML4(지금 사용하고 있는 HTML5의 이전 버전)을 XML에 맞도록 재정의한 언어이다.

HTML5보다 조금 더 구조화된 형식과 엄격한 문법을 가지고 있다.

- DOCTYPE: 웹 페이지의 맨 처음에 선언되어 어떤 종류의 HTML인지 웹 브라우저에게 알려준다.

- meta charset: 해당 페이지의 인코딩 방식을 나타낸다.

<!-- <!DOCTYPE html> 이걸 넣지 않으면 브라우저에서 html 잘 못 읽을 수도 있다. -->
<!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>
</head>
<body>
    
</body>
</html>

현재는?

HTML5 명칭은 폐기되었으며, HTML Living Standard가 현재 최신 버전을 나타내는 이름이다.

3. 자주 쓴 HTML 태그들

글, 텍스트, 링크

<h1> <h2> <h3> <h4> <h5> <h6>

h1은 검색에 아주 중요한 영향을 미치기 때문에 한 번만 사용하는게 좋다.

<h1>이 페이지의 대표 제목입니다.</h1>

문장과 문단 - p

문장, 문단/일반적인 텍스트 콘텐츠

<p>이건 문단이에요.</p>

줄바꿈 - br, wbr

html에서 문장 띄움은 별 효과를 보지 못 하기 때문에 줄바꿈 태그를 사용해야한다.

br은 그냥 줄바꿈

wbr은 한 줄로 표시가 불가능할 때만 줄바꿈

<p>
	이 텍스트는 한 줄로 표현이 가능하다면 한 줄로 쭉 나오고,
	자리가 모자라서 다음 줄로 넘어간다면 바로<wbr>
	여기부터 다음 줄에 표시될 겁니다.
</p>

목록 - ul, ol, dl

ul (unordered list)- 순서가 없는 목록

ol (ordered list)- 순서가 있는 목록

dl - 제목-설명 형태의 목록

ul - 순서가 없는 목록

<h2>내가 좋아하는 음식</h2>
<ul>
	<li>초밥</li>
	<li>라면</li>
	<li>삼겹살</li>
</ul>

ol - 순서가 있는 목록

<h2>세계 인구 순위 TOP 5</h2>
<ol>
	<li>중국 1,412,360,000</li>
	<li>인도 1,393,409,033</li>
	<li>미국 331,893,745</li>
	<li>인도네시아 276,361,788</li>
	<li>브라질 213,993,441</li>
</ol>

dl - 제목-설명 형태의 목록

<dl>
	<dt>자바스크립트</dt>
	<dd>브랜든 아이크</dd>
	<dt>파이썬</dt>
	<dd>귀도 반 로섬</dd>
</dl>

링크 - a

<a href="https://studiomeal.com">스튜디오밀</a>
<a href="https://studiomeal.com" target="_blank">스튜디오밀(새창)</a>

_blank는 클릭하면 계속 새로운 탭이 열리는 반면,

blank는 클릭하면 한 번 열린 탭에서(새로운 탭이 열리는 것 x) 계속 새로운 페이지가 열리는 것을 확인할 수 있다.

<strong> <em>

strong - 매우 강조

em - 적당히 강조

* 의미를 강조를 할 때는 strong이나 em을 쓰면 좋지만 단순히 디자인상로만 강조하면 사용하지 않는게 좋다.

<span>

특별한 의미 없이, 디자인이나 값 지정 등의 목적으로 텍스트를 감싸는 용도

* div 같은 경우는 박스처리를 해준다.

외부 콘텐츠

<img>

이미지

<img src="images/sonic.jpg" alt="바람도링 소닉">

<figure>

내용과 관련된 이미지, 비디오, 오디오 등을 감싸는 용도

<figure>
    <!--figure도 기본 구조가 있어서 여백이 조금 생길 수 있다.-->
	<img src="images/sonic.jpg" alt="바람도링 소닉">
    
    <!--figure 안에 figcaption을 넣어놓으면 누가 봐도 이미지의 설명이구나를 알 수 있다. -->
    <figcaption>엄청 빠르고 용감한 고슴도치</figcaption>
</figure>

<video>

비디오를 로드하고 재생

muted - 소리 제거

autoplay - 자동 재생

loop - 반복 재생

* 브라우저들이 정책적으로 사용자가 의도하지 않은게 실행되지 않도록 설정한다.

* muted 에서 묵음처리가 된 비디오만 autoplay 가 된다. => 비디오만 아니라 오디오도 동일

* 매너모드에서 소리가 나는지 안 나는지까지도 조절이 가능하다.

* 유튜브 영상을 퍼와서 재생하도록 할 수도 있음. (개발자 도구 분석하면 됨!!) 예시) https://www.naturing.net/landing

<video muted autoplay loop src="intro.mp4"></video>

레이아웃을 구성하는 태그들

<section> <article>

한 개의 주제를 가진 콘텐츠 그룹 단위

article은 콘텐츠를 단독으로 다른 곳에 사용할 수 있는 콘텐츠를 담음

<header>

콘텐츠 그룹의 시작 부분

* 콘텐츠 그룹 => <section>이나 <article>

section이나 article의 시작 부분

~~확률적으로 header 태그에 h1이나 h2가 많이 들어가겠지? 위치가 아니라 의미상으로 파악하면 된다.~~

```html
<!-- 나쁨/h2 자체도 section이나 article의 핵심이 될 수 있다... 그래서 별로-->
<header>
	<h1>라면 끓이기</h1>
	<h2>쉬우면서도 더 맛있게 끓이는 방법</h2>
</header>

-----------------------------------------------------------------------------------------------


<!-- 좋음 -->
<header>
	<h1>라면 끓이기</h1>
	<p>쉬우면서도 더 맛있게 끓이는 방법</p>
</header>


-----------------------------------------------------------------------------------------------


<!-- 좋음 -->
<header>
	<hgroup>
		<h1>라면 끓이기</h1>
		<h2>쉬우면서도 더 맛있게 끓이는 방법</h2>
	</hgroup>
</header>
```

<footer>

콘텐츠 그룹의 끝 부분

section이나 article의 끝 부분

<footer>
	<p>Copyright &copy; 2022 blahblah</p>
	<address>
		<p>제주특별자치도 제주시</p>
		<p>xxxxx@xxx.com</p>
	</address>
</footer>

<aside>

페이지의 주요 내용과 직접 관련이 없는 부수적인 내용의 그룹

광고, 위젯, 연관 링크 목록 등

* 각주는 aside와 부적합하다. (각주는 페이지의 주요 내용을 부연설명하는 역할이기 때문)

<main>

페이지에서 가장 핵심이 되는 내용을 감싸는 태그

한 페이지에 한 개만 허용(눈에 안 보이는 경우 여러개 존재 가능)

=> 기술적으로 2번 이상 썼다고 해서 문제가 되는 것은 아니지만 규칙 같은거라고 생각하면 된다.

<div>

특별한 의미 없이 레이아웃 구현 등의 이유로 요소들을 그룹핑하는 태그

4. CSS

HTML를 예쁘게, 보기 좋게 꾸며주는 CSS

1. 외부 CSS 파일 로드하기

=> 가장 많이 선호되어 쓰인다.

<head>
	<link rel="stylesheet" href="css/foo.css">
</head>

2. HTML 안에 CSS 작성하기

<head>
	<style>
    	body {font-size: 14px;}
    </style>
</head>

3. 인라인 스타일

<body style="font-size: 14px;>

4. CSS 파일 안에 CSS 포함하기

@import "foo.css";

에릭 마이어의 reset CSS https://meyerweb.com/eric/tools/css/reset/

Normalize.css https://necolas.github.io/normalize.css/

각 브라우저들에 자체적으로 적용되어 있는 기본 스타일(여백 등)을 초기화 시켜서 원하는 디자인을 적용하기 쉽게 만들어 줍니다. 위의 두가지 방법을 일반적으로 많이 사용하며, 프로젝트에 맞게 직접 만들어 쓰기도 합니다.

[body의 background-color를 red로 설정]

/* 선택자 */
body {
	background-color: red;
			/* 속성 */  /* 값 */
}

[header에 포함되어 있는 a의 display를 inline-block으로 설정]

/* 선택자 */
header a {
	display: inline-block;
 /* 속성 */   /* 값 */
}

* : 문서 내의 모든 엘리먼트를 선택.
body, header, h1, section 등 해당 이름을 가진 html 엘리먼트를 선택.
#foo id 선택자 : <div id="foo">의 형태로, id는 중복이 불가능한 유일한 값.
.foo class 선택자 : <div class="foo">의 형태로, 중복이 가능. class로 자주 쓰는 스타일을 정의해두고 재사용.
input[type="text"] : input 엘리먼트 중 type 속성의 값이 text인 엘리먼트를 선택.

* 클래스와 아이디 중 뭐가 이길까???

=> 아이디가 이긴다. 아이디는 유일하게 하나만 선언할 수 있기 때문에

[.foo > p 설명 예시 code]

.foo > p : class="foo"인 엘리먼트의 직계 자식 엘리먼트 중 p를 선택. 문서 내의 모든 엘리먼트를 선택.

<section class="foo">
	<header>
		<h1>집에서 맛있는 피자 만들기</h1>
		<p>주위에서 쉽게 구할 수 있는 재료를 중심으로</p>
	</header>
	<p>AAAAA</p> <-.foo>p
</section>

[.foo:first-child/.foo:last-child/.foo-nth-child(n) 설명 예시 code]

.foo:first-child: class="foo"인 엘리먼트 중 첫 번째 자식인 엘리먼트를 선택

.foo:last-child: class="foo"인 엘리먼트 중 마지막 자식인 엘리먼트를 선택

.foo:nth-child(n): class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 선택

<ul>
	<li class="foo">1</li>    <!-- .foo:first-child -->
	<li class="foo">2</li>    
	<li class="foo">3</li>    <!-- .foo:nth-child(3) -->
	<li class="foo">4</li>
	<li class="foo">5</li>    <!-- .foo:last-child -->
</ul>

.box {
	box-sizing: content-box;
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}

box-sizing: border-box (border까지 width에 포함)

.box {
	box-sizing: border-box
	/* border까지 width에 포함 */
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}

저작자표시

'알아두면쓸데있는신기한잡학사전 > 고군분투흔적들' 카테고리의 다른 글

[Web] CSS 레이아웃 - Grid, Flex 차이 및 기본 개념 (0)	2022.08.18
[Web] FE - 부트스트랩 (0)	2022.08.18
[Web] FE - CSS 연습 (0)	2022.08.17
[Web] FE - CSS (0)	2022.08.17
[Web] Network 동작방식/front-end, back-end 동작 방식 (0)	2022.08.16

대범하게

[Web] HTML & CSS

1. HTML과 CSS

2. HTML의 기본 형태

XHTML과 HTML5

현재는?

3. 자주 쓴 HTML 태그들

글, 텍스트, 링크

<h1> <h2> <h3> <h4> <h5> <h6>

문장과 문단 - p

줄바꿈 - br, wbr

목록 - ul, ol, dl

링크 - a

<strong> <em>

<span>

외부 콘텐츠

<img>

<figure>

<video>

레이아웃을 구성하는 태그들

<section> <article>

<header>

<footer>

<aside>

<main>

<div>

4. CSS

'알아두면쓸데있는신기한잡학사전 > 고군분투흔적들' 카테고리의 다른 글

티스토리툴바

[Web] HTML & CSS

1. HTML과 CSS

2. HTML의 기본 형태

XHTML과 HTML5

현재는?

3. 자주 쓴 HTML 태그들

글, 텍스트, 링크

<h1> <h2> <h3> <h4> <h5> <h6>

문장과 문단 - p

줄바꿈 - br, wbr

목록 - ul, ol, dl

링크 - a

<strong> <em>

<span>

외부 콘텐츠

<img>

<figure>

<video>

레이아웃을 구성하는 태그들

<section> <article>

<header>

<footer>

<aside>

<main>

<div>

4. CSS

'알아두면쓸데있는신기한잡학사전 > 고군분투흔적들' 카테고리의 다른 글

관련글

티스토리툴바