HTML/CSS Basic

임채현·2022년 1월 2일

CSS TIL WeCode html

Introduction

HTML

HTML(Hypertext Markup Language)은 웹 페이지를 만들기 위한 언어이다.
HTML로 웹페이지의 구조를 잡을 수 있다.
HTML파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다.

CSS

CSS는 Cascading Style Sheet로 HTML 태그에 디자인을 입혀주는 것이다.
CSS로 HTML이 더 아름답게 보이도록 스타일링할 수 있다.

JS

JS는 단순 HTML과 CSS만을 사용하였을 때의 정적인 웹에서 동적인 부분을 추가해준다.

쉽게 얘기하면 HTML은 뼈대 CSS는 몸의 역할을 하고 Javascript는 근육과 같은 역할을 한다고 말할 수 있다.

About HTML

HTML은 다양한 태그(tag)와 태그에 속해있는 속성(attribute)으로 이루어진다.
태그와 내용으로 이루어진 한 구조를 우리는 요소(element)라 부른다.

다음의 예시를 살펴보자!
<a href="https://wecode.com">위코드로 이동</a>

1. 여기서 a는 tag의 이름으로 내용(content)를 감싸주는 역할을 합니다. 실제 웹에서는 보이지 않으며 반드시 시작과 끝이 존재하는 태그가 있고 시작만 존재하는 태그도 있습니다. <a>태그는 전자에 해당한다.

2. 위코드로 이동은 내용(content)에 해당하며 해당 브라우저는 이 내용을 웹에 보여준다.

3. href는 <a>의 속성으로 태그마다 다양한 속성이 존재한다.

4. 다음의 예시와 같은 한 구조를 가리켜 요소(element)라 부릅니다. 보통 시작태그와 끝태그로 구성된 한 문장을 말한다.

HTML의 다양한 태그와 속성들은https://www.w3schools.com reference 에 들어가 확인할 수 있다. 단점은 영어다.
https://ofcourse.kr/ 는 한글로 쉽게 확인할 수 있다.

PS) 속성은 id와 class를 보통 많이 쓰는데 그 중에서도 class를 가장 많이 쓴다.
class를 가장 많이 쓰는 이유는 CSS의 성질 때문이다. 이는 다음에 더 자세히 다룰것인데
id는 너무 특정성이 강해서 범용성이 떨어지기 때문에 더 포괄적인 class를 많이 쓰게 된다.

About CSS

CSS를 적용하는 법은 크게 3가지로 나뉜다.

1. 인라인 스타일 : 태그 style 속성에 집적 작성합니다.

<h1 style="color: red;">FRONTEND 101</h1>

빠르고 편하다
적용해야할 스타일이 많아지면 가독성을 해칠 수 있다.
html태그와 style코드가 혼재되어 유지보수에 좋지 않다.
Cascade특성에 따라 inline 속성이 항상 최우선이 되기 때문에 본인은 선호하지 않는 방법...!

2. 스타일 태그 : html 파일 내에 css를 작성하는 방법

<style> h2 { color: #408090; } </style>

html 파일에 HTML 코드도 작성하고, CSS도 작성하니 편하고 빠른 방법이다.
기능적으로(HTML구조와 디자인) 분리되지 않았기 때문에 유지보수에 적합하지 않다.
HTML을 수정하려면 html 파일을 확인하고, 디자인을 수정하려면 css파일을 확인하는 것이 개발하기 좋다.
위에 방법보다는 낫다. 하지만 본인의 마지막 방법을 제일 선호한다.

3. CSS파일에 작성 : html과 css파일을 분리하여 작성하는 방법

<link href="style.css" rel="stylesheet" type="text/css" />

link — link태그로 사용할 css파일을 링크해준다.
href — href 속성에 css 파일 경로를 작성한다.
type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"이다.
rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해준다.