HTML & CSS 정리

황태규·2023년 3월 24일
0

HTML

목록 보기
2/5

  • 이곳은 HTML, CSS를 정의를 자세하게 다루지 않습니다.

보다 자세하게 공부하고 싶으면 아래 링크로 가셔서 공부하시는걸 추천합니다.
HTML / HTML 심화
CSS / CSS 심화

HTML

웹페이지의 뼈대를 구성하는 언어이다. (프로그램 언어는 X)

명령어 html : 5 를 선택한다.
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>

!DOCTYPE html - 웹 문서의 유형 선언문
html - html 시작 선언
lang="en" - 언어 속성 ko로 변경 가능
head - 문서의 요소
title - 제목
body - 문서의 본문

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>문단 태크</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그. 
    페이지마다 하나씩 꼭 써주는 게 좋다, 그래야 구글 검색이 잘 된다.</h1>
    <h2>h2는 소제목</h2>
    <h3>h3~h6까지 있다</h3>
    <hr> 태그는 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용
    span 태그: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요 #CSS
    <hr>
    a 태그 아무 기능이 없으며 하이퍼링크를 사용한다
    <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    
    img 태그: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그: <input type="text" />
    <hr>
    button 태그: <button> 버튼입니다</button>
    <hr>
    textarea 태그: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

추가로 필요한 정보는
HTML 튜토리얼 MDN
HTML 시작
HTML 태그 레퍼런스

CSS

웹문서를 꾸미는 언어이다. 해당글은 CSS는 기초 문법구성만 다룹니다.

CSS 문법

CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성.
선택자 - CSS를 적용하고자 하는 HTML 요소(element).
선언부 - 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다.
이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다.

CSS 선택자

스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자는 다음과 같습니다.

  • HTML 요소 선택자
  • 아이디(id) 선택자
  • 클래스(class) 선택자
  • 그룹(group) 선택자

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택

예제

<style>

    h2 { color: teal; text-decoration: underline; }

</style>

...

<h2>이 부분에 스타일을 적용합니다.</h2>

아이디(id) 선택자

아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용

이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택한다.

예제

<style>

    #heading { color: teal; text-decoration: line-through; }

</style>

...

<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

클래스(class) 선택자

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용

이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택한다.

예제

<style>

    .headings { color: lime; text-decoration: overline; }

</style>

...

<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>

<p>class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>

<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

그룹(group) 선택자

그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용

그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결

이러한 그룹 선택자는 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 준다.

예제

<style>

    h1 { color: navy; }

    h1, h2 { text-align: center; }

    h1, h2, p { background-color: lightgray; }

</style>

CSS 주석(comments)

주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미합니다.

이러한 주석은 다른 CSS 코드와는 달리 웹 브라우저에 의해 해석되지 않습니다.

CSS에서 주석을 표현하는 방법은 다음과 같습니다.

문법
/* 주석내용 */

<style>

p { color: teal; /*이것은 한 줄짜리 주석입니다.*/ font-size: 30px; }

/* 

이것은 두 줄짜리 주석입니다.

몇 줄이라도 가능합니다. 

*/

</style>

tip
CSS에서 주석을 작성할 때는 절대로 주석 내부에 또 다른 주석을 넣어서는 안 됩니다.

<style>

p { color: teal; /*이것은 한 줄짜리 주석입니다.*/ font-size: 30px; }

/* 

이것은 두 줄짜리 주석입니다.

몇 줄이라도 가능합니다. 

*/

</style>

첫 번째 주석 안에 한 줄짜리 두 번째 주석을 삽입한 예제입니다.
이때 첫 번째 주석의 두 번째 라인은 두 번째 주석의 */ 기호로 인해 정상적인 주석으로 인식되지 못합니다.

CSS 적용

CSS를 적용하는 방법

  1. 인라인 스타일(Inline style)

  2. 내부 스타일 시트(Internal style sheet)

  3. 외부 스타일 시트(External style sheet)

인라인 스타일(Inline style)

HTML 요소의 style 속성을 사용하여 인라인 스타일을 적용하는 것입니다. 이 방법은 한 요소에만 스타일을 적용하고, 스타일이 자주 변경되는 경우에는 유지보수가 어렵습니다.

예시:

<p style="color: blue; font-size: 16px;">인라인 스타일 적용 예시</p>

내부 스타일 시트 (Internal style sheet)

HTML 문서의 head 요소 안에 style 요소를 작성하여 해당 문서 내에서 스타일을 정의하는 것입니다. 이 방법은 한 페이지에서 여러 요소에 대한 스타일을 쉽게 정의할 수 있으며, 유지보수도 쉽습니다.

예시:

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>내부 스타일 시트 적용 예시</p>
</body>

외부 스타일 시트 (External style sheet)

CSS 파일을 작성하고, HTML 문서에서 해당 파일을 불러와 스타일을 적용하는 것입니다. 이 방법은 여러 페이지에서 공통으로 사용되는 스타일을 정의할 수 있으며, 유지보수도 쉽습니다.

예시:

// style.css 파일
p {
  color: blue;
  font-size: 16px;
}

// index.html 파일
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>외부 스타일 시트 적용 예시</p>
</body>

내부 스타일 시트와 외부 스타일 시트를 사용하는 것이 좀 더 효율적이며, 유지보수도 쉬운 방법입니다.

VSCODE단축키

  • 새로고침
    - F5
    • 저장
      • Windows: Ctrl + S
      • macOS: command + S
    • 전체선택
      • Windows: Ctrl + A
      • macOS: command + A
    • 잘라내기
      • Windows: Ctrl + X
      • macOS: command + X
    • 콘솔창 줄바꿈
      • shift + enter
    • 코드정렬
      • Windows: Shift + Alt + F
      • macOS: Shift + Option + F
    • 들여쓰기
      • Tab
      • 들여쓰기 취소 : Shift + Tab
    • 주석
      • Windows: Ctrl + /
      • macOS: command + /
    끝!
profile
응애

0개의 댓글