HTML과 CSS

Dubiju·2022년 10월 24일
CSShtml백엔드코드스테이츠프론트엔드
0

SEB_BE_42기

목록 보기
3/7
post-thumbnail

HTML & CSS

🧐 BE 개발자가 되고 싶으면서 왜 HTML&CSS를 알아야 해?

기본적인 기술의 맥락과 내용을 이해하는 것은 협업이나 개인 프로젝트를 만들어야 하는 경우 매우 중요하다.

웹 개발의 역사를 살펴보면, 초창기에는 FE과 BE가 구분되어 있지 않았다.
하지만 웹 개발 관련 기술이 발전함에 따라 각 기술들의 내용이 점차 세분화되었고, 점차 복잡해지는 웹 개발의 영역을 구분해야 할 필요성이 생겼다.

이런 배경에서 모던 웹 개발은 그 기능과 역할에 따라 보여지는 부분을 담당하는 프론트엔드와 보여지지 않는 부분을 담당하는 백엔드로 나뉘어졌다.

그럼에도 각 영역의 개발자는 상대 영역의 기본적인 내용에 대해 필수적으로 이해해야 한다.

결국 하나의 웹 서비스는 FE개발자와 BE개발자의 협업을 통해 만들어지는 것이기 때문에, 협업의 과정에서 상대가 할 수 있는 것과 없는 것을 전혀 이해할 수 없다면, 원활하게 협업을 하기 어려울 것이다.

HTML(HyperText Markup Language)

: 웹 페이지를 구성하는 마크업 언어

마크업 언어(markup language)

: 태그 등을 이용하여 문서나 데어터의 구조를 명기하는 언어의 한가지
: 일반적으로 데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와 구분

  • 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어
  • 프로그래밍 언어 X
  • tag들의 집합
    - Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소
  • html 확장자를 사용

태그 내부에 내용이 없다면 즉, 와 같이 표현되는 경우 < tag />와 같이 표현 가능하다.

주요 범위

html: 문서의 범위를 설정
head: 문서의 정보를 설정
body: 문서의 구조를 설정

📌 HTML에서 자주 사용하는 TAGS

태그설명
divDivision한 줄을 차지한다.
spanSpan컨텐츠 크기만큼 공간을 차지한다.
imgImage이미지 삽입
aLink링크 삽입
ol & ul & liUnordered List & List Item각 항목(li)의 정렬된 목록(ol, 순서 O)이나 정렬되지 않은 목록(ul, 순서 X)을 설정
inputInput(Text, Radio, Checkbox)다양한 입력 폼
textareaMulti-line Text Input다양한 입력 폼
buttonButton버튼

UI & UX

📌 UI(User Interface, 사용자 인터페이스)

: 컴퓨터와 사용자를 연결하는 상호소통 매개체의 모양과 동작
: SW 화면 등 사람과 접히는 면을 설계

📌 UX(User Experience)

: UI를 포함해서 사용자가 특정 서비스를 사용하면서 직/간접적으로 경험하면서 느끼는 종합적인 만족도(느낌, 태도, 행동)

웹페이지를 위한 UI/UX를 고려하여 웹 서비스를 만든다.
= 사용자의 입장에서 편리하게 해당 서비스를 이용하고 조작할 수 있도록 하는 시각적인 도구를 만들고, 사용자의 입장에서 편의를 생각한다

CSS(Cascading Style Sheets)

: 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

  • 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 도움
  • CSS는 스타일링 도구이므로, 독립적으로 기능X (반드시 HTML이 있어야만 동작)

사용법 자체는 그렇게 어렵지 않고 직관적이지만, 프로젝트의 규모가 조금만 커져도 레이아웃이 깨지거나 CSS값이 서로 충돌하는 등 CSS를 의미있게 구성하는 일이 어렵고 복잡해진다.

📌 웹 페이지 만들기

  1. HTML로 웹 페이지의 구조 세우기
  2. 더 나은 UX를 제공하기 위해 CSS로 UI와 레이아웃을 적절히 구성
body {
		color : red;
        font-size: 30px;
}

select는 특정 태그의 이름,id, class를 선택한다는 의미를 가지고 있다.

셀렉터로 특정 요소를 선택한 이후에는, 이어지는 선언 블록(중괄호) 안에서 해당 요소에 적용할 내용을 작성할 수 있다.

여기서 요소에 적용할 수 있는 내용을 우리는 속성이라 부르고, 속성명(property name)과 속성값(property value)을 사용하여 속성을 변경할 수 있다.

속성과 값의 끝에는 세미콜론(;)을 붙여 각 속성의 내용을 구분할 수 있으며, 하나의 속성만 존재할 때에는 세미콜론을 붙이지 않아도 무방하다.

다만, 좀 더 명료한 구분을 위해 속성과 값을 작성한 다음에는 세미콜론을 적는 습관을 들이는 것이 좋다.

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

link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.

link 태그의 rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다.
CSS는 이름처럼 기본적으로 stylesheet이므로 rel 속성에 stylesheet을 추가한다.
href 속성에는 파일의 위치를 추가해야 한다.

CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가할 수 있다.
하지만 관심사 분리 측면에서 권장되지 않는다.

관심사 분리는 HTML은 웹 페이지의 구조와 내용만 담당하고, CSS는 디자인만 담당하도록 하여 HTML과 CSS의 역할을 분리하는 것을 의미한다.

CSS 스타일을 적용할 수 있는 방법에는 3가지가 있다.

  1. 같은 줄에서 스타일을 적용하는 인라인 스타일
  2. CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style 태그 내에 작성하는 내부 스타일 시트
  3. 외부 스타일 시트

인라인 스타일 

<nav style="background: #eee; color: blue">...</nav>

그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않는다.

기본적인 셀렉터 (selecter)

📌 id로 이름을 붙여서 스타일링 적용하기

만약 navigation section 아래에 있는 h4 요소에만 색을 바꾸려면 어떻게 해야 할까?

h4 요소는 하나의 태그이기 때문에 태그를 선택해 색상을 변경할 수 있다.

  h4 {
  color: red;
}

navigation section에만 적용하려고 했던 의도와는 달리, aside section의 h4 요소에도 변경한 색상이 적용됐다.

navigation section 아래의 h4 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있다.

이름을 붙일 때에는 가능한 의미를 담아서 구분할 수 있도록 하자.

id가 있는 요소를 선택할 때에는 #기호를 이용한다.
id는 하나의 문서에서 한 요소에만 사용해야 한다.

h4 요소에 id를 붙이고 id로 요소를 선택해 스타일링 한다.

<h4 id="navigation-title">This is the navigation section.</h4>

#navigation-title {
  color: red;
}

📌 class로 스타일을 분류하여 적용하기

id와 유사하게 특정 요소에 class를 지정하는 방법이 있다.

  1. navigation section의 li 요소와 footer의 li 요소를 구분한다.
  2. 가장 먼저 시도했던 태그를 선택하는 방법으로 li 요소를 스타일링한다.
li {
  text-decoration: underline;
}

이번에도 의도와는 다르게 footer에 있는 li 요소에도 스타일링이 적용되었다.
그럼 이번에도 id 사용할 수 있을까? X

id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 한다.

이때 사용할 수 있는 속성이 바로 class이다.
주로 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해 class를 사용한다.

프론트 작업을 진행하다보면 유일한 요소보다는 다수의 요소에 특정 속성 값을 부여해주어야 하는 경우가 많기 때문에 id보다 class가 훨씬 빈번하게 사용된다.

모든 li 요소에 동일한 class를 추가하기 위해서 class를 선택할 때 #이 아닌 . 을 이용하여 선택한다. 

<!-- 바른 예제 -->
<ul>
	<li class="menu-item">Home</li>
        <li class="menu-item">Mac</li>
	<li class="menu-item">iPhone</li>
	<li class="menu-item">iPad</li>
</ul>

.menu-item {
  text-decoration: underline;
}

📌 여러 개의 class를 하나의 엘리먼트에 적용하기

여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 적용하려는 class들의 이름을 구분한다.

  • 요소를 만들거나, 요소에 스타일링을 적용할 때에는 항상 이름과 목적이 일치하는지 잘 살펴보아야 한다.
li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

📌 id와 class 차이

idclass
#으로 선택.으로 선택
한 문서에 단 하나의 요소에만 적용동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용스타일의 분류에 사용

CSS Selector

셀렉터

h1 { }
div { }

전체 셀렉터

* { }

Tag 셀렉터

section, h1 { }

ID 셀렉터

#only { }

class 셀렉터

.widget { }
.center { }

attirbute 셀렉터

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

후손 셀렉터

header h1 {}

자식 셀렉터

header > p { }

인접 형제 셀렉터

section + p { }

형제 셀렉터

section ~ p { }

가상 클래스

a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }

요소 상태 셀렉터

input:checked + span { }
input:enabled + span { }
input:disabled + span { }

구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }

텍스트 꾸미기

📌 색상

글자의 색상을 변경하는 속성은 color

  • HEX(16진수, RGB)
  • 주요 색상의 이름을 사용

예) red class의 color 속성에 #ff0000 값을 할당한다.

.red {
  color: #ff0000;
}

배경 색상이나 박스 테두리 색상을 적용할 수도 있다.

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

📌 글꼴

글꼴의 속성을 font-family

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

글꼴의 이름은 따옴표를 붙여 적용할 수 있다.

사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있다.
이런 경우를 대비하여 fallback 글꼴을 추가할 수 있다.

fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책으로, fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있다.

입력된 순서대로 fallback이 적용된다.

📌 크기

글자의 크기를 변경하기 위해서는 font-size 속성을 사용한다.

.title {
  font-size: 24px;
}

글꼴의 단위

절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등

기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
px(픽셀)을 사용한다.
px는 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성이 불리하다.

하지만 픽셀을 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다.

기본적으로 고해상도에서는 1px이 모니터이 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있다.

따라서 px은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

그 외 일반적인 경우에는 상대 단위인 rem을 추천한다.
root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이다

📌 기타 스타일링

  • 굵기: font-weight
  • 밑줄, 가로줄: text-decoration
  • 자간: letter-spacing
  • 행간: line-height

📌 정렬

  • 가로 정렬 : text-align
  • 왼쪽 정렬: left
  • 오른쪽 정렬: right
  • 가운데 정렬: center
  • 양쪽 정렬: justify

세로 정렬
vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 한다.

정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.

Velog로 글을 작성하려고 하는데 단축키도 안먹히고 글쓰기 불편한 것 같다.
너무 글로만 작성한 것 같아서 좀 더 간결하게 정리해야 할 필요가 있는 것 같다.

profile
Dubiju
Backend Developer
다음 포스트

HTML CSS 박스

0개의 댓글