[TIL] #DAY - 062 - HTML, CSS 기본 정리 (Front End)

Sparta Coding Club/Today I Learned [TIL]

[TIL] #DAY - 062 - HTML, CSS 기본 정리 (Front End)

양한마리 2022. 12. 1. 02:38

728x90

HTML, CSS 기본 문법을 정리해보자

HTML 이란?

HTML 은 Hyper Text Markup Language 줄임말로 간단하게 말하면 웹 페이지를 만드는 마크업 언어라고 할 수 있다. HyperText는 기본적으로 웹 페이지에서 다른 페이지로 이동할 수 있는 HyperLink를 지원하도록 설계 되었고 이 덕분에 페이지 안에서 클릭만으로 다른 페이지로의 이동이 가능하게 된다.

HTML은 특정 기능을 지원하는 태그 문법을 사용한다.
HTML 태그는 그 종류의 수가 100개가 넘는데, 그 중에서 통계적으로 가장 많이 쓰이고 유용한 태그들을 하나씩 살펴보면 아래 그림과 같다.

1. HTML Basic Tags (Useful)

<html>
웹페이지의 시작과 끝을 나타낸다.
<head>
웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용한다.
<body>
브라우저에 실제 표시되는 내용을 담고있다.
<title>보통 제목표시줄이 더 많이 노출되기 때문에 잘 쓰면 좋다.
문서의 제목을 나타낸다. 웹브라우저의 제목 표시줄에 표시된다.
<meta>
```
<meta name="viewport" content="width=device-width, intitial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
```
뷰포트란 화면상에 우리가 작성한 레이아웃이 나오는 전체 영역을 의미. 나중에 반응형 페이지를 위해서 뷰포트 세팅을 해줘야한다.
문자 인코딩 및 문서 키워드 요약 정보
<div>
아무런 의미가 없는 태그, 어떤 컨텐츠들을 목적에 따라 묶는 용도로 쓴다.
<span>
div와 마찬가지로 아무런 의미가 없는 태그. div와 의 차이는 inline level element이기 때문에 span을 여러개 붙여도 줄바꿈이 되지 않는다.
<a>
```
<a href="연결할 링크의 경로">링크이름</a>
```
하이퍼링크를 사용해서 페이지들간의 이동이 가능하다. 아직 다른페이지 준비가 안되있을 경우 "#"로 표시한다. 특정 id로 이동하는 앵커 역할도 할 수 있다.
anchor, 웹페이지나 외부 사이트 연결

<script type="text/JavaScript">
  document.write("자바스크립트 코드 추가");
</script>

코드 삽입. 실행 가능한 코드를 참조하거나 삽입할 때 사용, 보통 자바스크립트 코드를 넣을 때 사용한다.

<link>

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

외부 파일을 연결할 때 사용한다. css나 js 파일을 연결해서 쓴다.
<img>
이미지 삽입, 웹페이지에 이미지를 넣을 때 사용한다.
<p>
단락, 사용하면 내용 앞뒤로 빈 줄이 생기면서 단락이 생긴다.
<li>
리스트 항목들을 나타내는데 사용
<ul>
순서가 없는 리스트 항목을 묶음
<ol>
순서가 있는 리스트 항목을 묶음
<style>
head 안에서 스타일 정보를 정의할 때 사용하는 태그
<br>닫는태그가 필요 없다.
줄바꿈, 개행.
<hn>h1 ~ h6
제목을 나타내는 태그
<input><input type="유형" 속성="속성값">
form 의 요소중 하나 사용자가 정보를 입력할 때 쓰인다.
<form>
get, post 방식으로 내용을 전송할 수 있다.

<iframe 
        width="560" 
        height="315" 
        src="http://www.youtube.com/embed/VAoBIpxYfBE" 
        frameborder="0" 
        allow="autoplay; encrypted-media" 
        allowfullscreen>
</iframe>

<iframe src="삽입할 페이지 주소" [속성="속성값"]></iframe>
외부 페이지를 삽입할 때 쓴다.
<strong>
중요한 내용 강조하는 태그
<i>
이탤릭 체
<button>type=submit, type=reset이 있다.
form 요소 중 하나로 페이지에 버튼을 넣고 form을 전송하거나 reset할 때 사용한다.

2. HTML Semantic Tags

대부분의 구조가 <div> 로만 이루어져 있다면 class, id, css 내용 등을 보고 어떤 역할을 하는 태그인지 유추해야 한다. 이러한 불편함을 개선하기 위해 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알수 있도록 만든 태그를 semantic tag라고 한다.

협업의 중요성이 커지면서 코드한줄 한줄에 의미가 드러날 수 있도록 코드를 짜는 것도 개발자의 중요한 덕목이라고 볼 수 있다.

<header>
사이트의 제목과 로고, 검색 창 등이 위치
<nav>
다른 페이지로 갈수 있는 링크들이 위치
<section>
페이지에서 보여주고 싶은 주요 내용들이 위치
<summary>
순수 텍스트, 헤딩 등으로 이루어진 paragraph가 위치
<aside>
본문 외의 내용들이 위치
<footer>
저작권 정보나 제작자 정보가 위치

CSS란

Cascading Style Sheets 의 줄임말로 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이고 보통 HTML 문서를 시각적으로 꾸미는 용도로 사용한다.

css는 선택자, 선언, 속성 이렇게 세 가지로 이루어져 있다.

선택자는 html 문서상에서 각 태그들을 식별할 수 있게 붙여놓은 이름을 선택자로 활용할 수 있다.
ex) sematic tags, class("."), id("#")

CSS 방법론

작명 규칙(Naming Convention)

유지 보수를 위해서 해당 태그의 CSS 선택자는 최대한 명확한 의미를 드러낼 수 있도록 선택한다.
소문자, 숫자만을 이용하여 작명한다.
여러 단어의 조합은 '-'을 이용해서 작명한다.

블록(Block)

재사용 할 수 있는 기능적으로 독립적인 페이지 구성 요소.
HTML에서 블록은 class 속성으로 표시된다. 각 블록은 형태나 속성 (red, big)이 아닌 목적(menu, button)에 맞게 결정해야 한다.
각 블록은 환경에 영향을 받지 않아야 한다. (위치, 여백 등을 임의로 설정 하지 말자)

요소(Element)

블록 안에서 특정 기능을 담당하는 부분
block__element 형태로 네이밍한다.

수식어(Modifier)

블록이나 요소의 모양 또는 상태를 결정한다.
block__element--modifier (더블 하이픈)으로 네이밍한다.

이렇게 기능별로 선택자 네이밍을 분리해놓으면, 각각의 선택자를 혼합해서 사용할 수 있고 중복되는 코드를 상당부분 줄일 수 있습니다.

<!-- example --> 
<section class="name
  		name__comment 
                name__comment--color"> .... 
</section>

나중에 BEM 찾아서 더 공부하거나, SCSS를 공부해보면 css 파일을 효과적으로 관리할 수 있는데 많은 도움이 될 듯하다.

반드시 알아야 하는 CSS 속성들

<head> 안에서 style 태그를 정의하고 그 안에 문서 내다 다른 태그들을 선언하고 꾸민다고 가정해보자. 만약 태그와 속성내용이 많아지면 html 문서 길이는 기하급수적으로 길어지게 될 것이다.

외부에 별도의 css 파일을 만들고 거기에 style을 정의한 후 해당 css 파일을 link 태그로 html 문서에 import 해서 style을 적용시킬 수 있다.

보통 css나 js, image 파일들을 정적 파일들이라고 하는데 별도의 폴더를 만들어서 관리하게 된다.

<head> 부분에 다음과 같이 파일의 경로를 추가하면된다.

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

font

페이지에서 사용할 폰트의 종류를 외부에서 받아올 수 있다. 부분마다 폰트를 사용할 수 있고 body 전체에 걸쳐서 특정 폰트를 사용하게 설정할 수 있다. 구글 폰트 페이지에서 import 하는 link를 가져와서 body에 적용시키면 쉽게 적용할 수 있다.

font 관련된 속성으로는 font-size, font-weight, text-style 등이 있습니다.

box-model

HTML 요소는 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box가 생기고 그 박스에 style을 주어서 문서를 꾸밀 수 있게 되는 것이다.

내용을 표시하는 영역(Content Area)부터 바깥 영역 여백(Margin)까지를 한 박스 모델의 영역이라고 보면 된다.

width

내용을 표시하는 영역에서 가로 길이를 나타낸다.

height

내용을 표시하는 영역에서 세로 길이를 나타낸다.
width와 height 을 구하는 기준은 기본이 위 그림이지만, box-sizing 속성을 통해서 border-box를 지정하면 테두리를 width와 height를 계산하는 기준으로 변경할 수 있다.

padding

내용과 border 사이의 영역을 나타내고 안쪽 여백 역할을 담당한다.

border

내용에 패딩을 더한 영역의 경계를 나타내며 margin과 padding의 경계가 되기도 한다. 테두리 역할을 한다.

margin

border 부터 box model의 maximum 범위 까지를 나타내는 영역이다. 바깥 여백 영역 역할을 한다.
외부 요소와의 거리를 조절하는 용도로 많이 사용된다.

display

display 속성은 요소를 어떻게 보여줄지를 결정한다. 주로 4가지 값이 쓰이는데 none, block, inline, inline-block이 쓰인다.

none은 아예 요소를 아예 보여주지 않고 지워버린다.

block은 기본적으로 가로영역을 전부다 차지하는 놈이다. 대표적으로 div, p, h, li 태그들이 그러한 때문에 요소 다음에 오는 요소는 개행이 된 것 처럼 보여진다. width, height을 지정할 수 있지만 여전히 다음 요소는 개행되어 나타난다.

inline 은 block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정할 수 없다는게 그 특징이다. 대표적으로 span b strong i 태그가 있다.

inline-block 은 block과 inline의 중간 단계다. 즉, width와 height는 지정할 수 있지만 개행은 되지 않는 놈이다.

flex

flexible-box를 사용할 수 있는 display 속성이다. 각각의 요소들을 item으로 보고 item들을 효과적을 정렬하고 배치할 수 있도록 도와주기 때문에 flex를 잘 이해하고 습득하신다면 아주 효과적인 웹 페이지를 만드실 수 있을 것이다.

flex는 두 가지 관점에서 볼 수 있는데 하나는 부모 역할을 하는 container 입장이고, 두 번째는 각각의 container 안에서 자식 역할을 하는 item 입장 이다.

먼저 container 입장에서 사용할 수 있는 속성을 하나씩 살펴보겠다.

container

1. flex-direction

flex-direction은 안에 있는 Item들을 정렬할 때 어떤 순서로 정렬할 지, 가로로 정렬할지 세로로 정렬할지를 선택할 수 있다. 정방향 가로정렬이 기본값이다.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

2. flex-wrap

flex 는 기본적으로 item을 한줄에 정렬하려고 한다. 이때 중간에 끊고 줄바꿈을 하고 싶다면 flex-wrap을 사용할 수 있다. no-wrap이 기본값이다.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3. justify-content

메인 축을 중심으로 아이템들을 여백과 함께 정렬하는 방식을 지정할 수있다.
flex-start가 기본 값이며 중앙 정렬을 원할 경우 center나 space-around등을 많이 사용한다.

.container {  
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; 
}

4. align-content

flex-wrap 을 사용해서 item이 여러 줄로 존재하고 있을 때, 여백과 함께 정렬하는 방식을 지정할 수 있다. 기본값은 flex-start이며, 한 줄 밖에 없을 때는 justify-content와 똑같다.

5. align-items

container 안에서 items 들간의 세로정렬을 하는데 쓰인다.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

item

1. order

각각의 아이템은 기본적으로 html 에 나열된 순서대로 우선순위가 매겨진다. 하지만 order를 임의로 지정하면 지정한 order 순서대로 정렬할 수 있다.

2. flex-grow

flex grow는 각 아이템들이 공간을 차지하는 비율을 지정한다. 기본 값은 모두 1이며 모두 1일 경우에는 공간이 균등하게 분배되지만 한 아이템이 2이면 해당 아이템에만 2배의 공간을 할당하고 나머지 공간을 남은 아이템들이 균등하게 가져간다.

기본값으로 flex : 1이렇게 만 적어도 된다.

사진 출처 : flex-guide

게임으로 Flex-box 연습하기!!

align

참고자료 : 여러가지 방법으로 정렬하기

text-align정의는 block요소에 해야 한다. center, left, right, 등 사용 가능하다.
block 요소 안에 있는 inline 요소를 정렬 한다. 여기서 inline 요소란 span,p, img 등이 포함된다.
marginwidth 를 지정할 수 없는 inline 요소는 쓸 수 없다.
정렬하고하자하는 요소의 width가 지정되어있다면 margin: 0 auto; 를 사용해서 중앙 정렬이 가능하다.
flex
.container { display: flex; justify-content: center; }

float

요소를 띄우는 속성으로서 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.

또한 한 라인에 요소들을 각각 오른쪽과 왼쪽에 배치할 때도 유용하게 쓰일 수 있다.

float을 사용할 때 주의할 점은, 자식요소의 높이 값을 부모가 전혀 인식할 수 없다는 것이다. 이를 해결 하기 위해서 .clearfix라는 가상 선택자를 만들어서 부모 요소에 클래스를 추가해주면 된다. 의미없는 빈 엘리먼트를 사용하지 않으면서도 flaot을 클리어 할 수 있다.

::after란 가상 선택자로 css를 통해서 가상으로 요소를 만들어 낼 수 있다.

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

background

background-image, background-color, background-size, background-position, background-repeat ..등등이 있다.

.container {
  background: url("test.jpg"); 
}

출처 : https://velog.io/@ljinsk3/HTML-%EA%B8%B0%EC%B4%88-%EB%82%B4%EC%9A%A9-%EC%A0%95%EB%A6%AC

728x90

'Sparta Coding Club > Today I Learned [TIL]' 카테고리의 다른 글

[TIL] #DAY - 064 - 쿼리셋 공부(1) (QuerySet) (0)	2022.12.05
[TIL] #DAY - 063 - ManyToMany 필드 확장하기 (Django) (0)	2022.12.02
[TIL] #DAY - 061 - CSS 정리 하는법 (Front End) (0)	2022.12.01
[TIL] #DAY - 060 - 파이썬 코딩 컨벤션 (Python coding convention) (0)	2022.12.01

현재글[TIL] #DAY - 062 - HTML, CSS 기본 정리 (Front End)

250x250

Coding Farm

백준, AI, 파이썬, 개발자, 개발일지, 알고리즘, 코딩테스트, Python, Wil, 부트캠프, 머신러닝, 문제풀이, Til, 비전공자, 백엔드, django, 반복문, 장고, 내일배움캠프AI3기, 스파르타코딩클럽,

Today :
Yesterday :

Coding Farm