HTML, CSS

이동건·2024년 10월 13일
web

Web

목록 보기
5/6

HTML

Hyper Text Markup Language의 약어로 웹페이지를 만들 때 사용하는 언어이다. HTML은 프로그래밍 언어는 아니고 웹페이지가 어떻게 구조화되어있는지 정의하는 마크업 언어이다.

Hyper Text란?

하이퍼텍스트는 링크에 따라 다른 페이지로 이동하거나 동일 페이지 내 다른 위치로 이동하는 비순차적 접근 방식이다.

Markup Language란?

태그 등을 이용하여 문서 혹은 데이터의 구조를 명기하는 언어이다.즉 해당 문서, 데이터가 어떤 의미를 가졌는지 쉽게 알 수 있게 해준다. 마크업 언어는 정적인 언어이기 때문에 프로그래밍 언어라고 하지 않는다.

HTML 문서 기본 구조

HTML은 다양한 요소들을 태그(tag)로 감싸서 사용하며, 이 태그들은 페이지에서 텍스트, 이미지, 링크, 동영상 등 다양한 콘텐츠를 표현할 수 있게 한다.

<!DOCTYPE html>
<html>
  <head>
    <title>페이지 제목</title>
  </head>
  <body>
    <h1>제목</h1>
    <p>문단</p>
    <a href="https://example.com">Link</a>
  </body>
</html>

주요 HTML TAG

<!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 의미를 가진다.
<html> : 웹 문서의 시작과 끝을 나타내는 태그로 브라우저가 해당 태그를 만나면 종료 태그까지 소스를 읽어서 브라우저에 표시한다.
<head> : 문서의 메타데이터(페이지 제목, CSS, JavaScript 등)를 정의한다.
<title> : 웹 브라우저의 탭이나 검색 결과에서 보이는 제목을 정의한다.
<body> : 페이지의 실제 콘텐츠를 포함하는 부분이다. 사용자가 볼 수 있는 내용은 모두 이 안에 들어간다.
<h1> ~ <h6> : 제목을 표시한다. 숫자가 작을수록 더 큰 제목이 된다.
<p> : 문단을 정의한다.
<a> : 링크를 정의한다. href 속성으로 이동할 URL을 지정한다.
<img> : 이미지를 삽입할 때 사용한다.
<ul>, <ol>, <li> : 목록을 만들 때 사용한다. <ul>은 순서 없는 목록, <ol>은 순서 있는 목록이며, <li>는 목록 항목이다.

CSS이란?

CSS란 Cascading Style Sheet로 html로 뼈대를 잡아준 문서에, style을 입혀주는 역할을 한다.

CSS 작성 방법

CSS를 작성한 후 HTML에 적용되도록 반영 하는 방법은 3가지가 있다.

1. Inline Style

태그 style 속성에 직접 작성할 수 있으며, 빠르고 편하다는 장점을 가지고 있다. 다만, 적용해야할 스타일이 많아지면 코드 가독성이 떨어진다는 단점 또한 가지고 있으며, 유지보수에도 좋지 않다.

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

2. Style Tag

HTML 파일 내에 CSS를 작성할 수 있는 방법이다. <style> 사이에 CSS문법을 사용하여 스타일을 작성한다. HTML 코드도 작성하고, CSS도 작성하니 편하고 빠른 방법이지만, 기능적으로 분리되지 않았기 때문에 유지보수에 적합하지 않다.

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

3. CSS File

HTML 파일과 분리하여 CSS 파일에 따로 작성하는 방법이다. style.css 파일에 몇 가지 스타일을 작성하는 방법이 있다. HTML파일에서 어느 CSS 파일이 쓰였는지 브라우저에 알려줘야 하므로, 링크를 해주는 태그를 추가해야 한다.

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

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

CSS 구조

CSS는 디자인을 적용할 Selector(선택자) 를 지정하고, 어떤 디자인을 적용할지 작성한다.

위 예제 사진은 <p> 태그 안에 있는 텍스트의 색상을 빨간색으로 변경하는 코드이다.
color 부분이 Property 속성이라고 하며, Red는 해당 속성의 값이다.
Selector(선택자) 는 여러 종류가 올 수 있다. Tag 또는 Class, Id 이름이 올 수 도 있다.

tag

해당 태그의 일괄 적용할 때 사용한다. 아래의 예제 코드는 P tag의 글씨 크기가 12픽셀로 적용된다.

p {
  font-size: 12px;
}

class

클래스에 디자인을 적용하고 싶을 때는 Selector에 . 이 필요하다.
.classname 형식처럼 작성해야 한다. 예로 다음의 코드를 만들 수 있다. 이 코드는 bold라는 Class 명의 Style이며, 이름에 맞게 글씨를 Bold 처리하는 것을 알 수 있다.

.bold {
  font-weight: bold;
}

이 Class를 사용하기 위해서는 아래와 같이 사용할 수 있다.

<p class="bold">n1</p>
<span class="bold">n2</span>
<div class="bold">n3</div>

id

위 Class와 같이 id에서는 # 으로 시작해야 한다. 그럼 해당 id의 요소만 스타일이 적용된다.

#profile {
  border-width: 1px;
  border-color: black;
  border-style: solid;
  text-align: center;
}

참고사항 및 마무리

https://velog.io/@wkdwl578/CSS-기본-개념과-사용법 [상세한 CSS 개념 및 코드 구조]

profile
이동건
🫠🥱
이전 포스트

Storage

다음 포스트

JavaScript

0개의 댓글