본문 바로가기
JavaScript, HTML, CSS

[HTML, 코드 스테이츠]01. HTML, CSS 기초

RamiT 2019. 9. 1. 23:50

코드 스테이츠 Pre 코스 여섯째 주 수강 후기.

 이번 주차에선 프런트엔드 개발과정의 기초를 배웠다. HTML이나 CSS관련은 아예 몰라서 궁금했었는데 생각했던 것보다 재밌고 신기하고 귀찮다ㅋㅋㅋ

 과제는 드디어 트위틀러. 어디서부터 시작해야 할지 잘 모르겠어서 예습만 하다가 이번 주 강의 이후부터 시작했다. 아직 완성한 건 아니지만 코드를 짜긴 했다. 문제는 이렇게 하는 게 맞는지 모르겠다는 것. 다른 사람들 코드를 보면 함수 구성 방식부터가 달라서 혼란스럽다. 에잉.. 일단 풀고 나서 생각해봐야지.

 

목차
1. HTML
2. CSS

01. HTML

  • HTML(HyperText Markup Language)
    • 웹페이지의 구조를 만들 수 있는 마크업 언어.
    • tag로 이루어져있음. (tag: 부등호 <>로 묶여있는 요소)
<!DOCTYPE html>               <!-- html문서의 시작에 꼭 써야 함. -->
<html>                        <!-- html의 시작태그 -->
  <head>                      <!-- head의 시작태그. 문서의 메타데이터 선언함 -->
    <title>문서의 제목</title>
  </head>                     <!-- head 종료태그 -->
  <body>                      <!-- body의 시작태그. 문서의 내용 -->
    <h1>Hello world</h1>      <!-- 크기에 따라 h1 ~ h6까지 있음 -->
  </body>                     <!-- body의 종료태그 -->
</html>                       <!-- html의 종료태그 -->

 

위의 html코드를 열어보면 이렇게 나온다.

 

 

자주 쓰이는 HTML 태그들

<div> division. 범위가 한 줄인 컨텐츠 분할 요소
<span> span. 범위가 작은 컨텐츠 분할 요소
<img> image. 이미지를 불러옴
<a> link. 링크
<ul>&<li> unordered list & list item. 리스트
<input> input(text, radio, checkbox). 여러 인풋 기능을 지원하는 태그
<textarea> multi-line text input. 여러 줄을 입력받을 수 있는 텍스트라인.
<button> button. 버튼

 

index.html(위 태그들을 사용한 html 코드)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" /> <!-- 페이지의 문자 인코딩을 UTF-8로 선언-->
        <!-- UTF-8: 유니코드를 위한 문자 인코딩 방식 중 하나 -->
        <title>연습</title>
        <link rel="stylesheet" type="text/css" href="tmpStyle.css">
    </head>
    <body>
        <div>
            ID <input type="text" placeholder="ID를 입력하세요"><br>
        </div>
        <div>
            PASSWORD <input type="password">
        </div>
        <input type="checkbox" checked>아이디 저장
        <input type="checkbox">자동로그인
        <div>
            <input type="radio" name="species"> 고양이
            <input type="radio" name="species"> 개
            <input type="radio" name="species" value="인간" checked> 인간
        </div>
        <textarea>/* 텍스트 입력 예제(줄바꿈 사용 가능) */</textarea><br>
        <button>저장</button>
        <div>
            <a href="https://ram-t.tistory.com/" target="_blank">내블로그</a>
        </div>
        <h1>h1/ Hello world</h1>
        <h2>h2/ Hello world</h3>
        <h3>h3/ Hello world</h3>
        <ul>
            ul/
            <li>
                <div class="highlight">
                    div/ 이미지1
                    <img src="img1.jpg">
                </div>
            </li>
            <li>
                <span class="highlight">
                    span/ 이미지2
                    <img src="img2.jpg">
                </span>
            </li>
        </ul>
    </body>
</html>

 

 tmpStyle.css(<div>와 <span>의 범위를 보기 위한 css)

div.highlight {
    background-color: #5ee;
  }

span.highlight {
    background-color: #ee3;
  }

 

위 코드의 실행 결과

 

<div>

 순수 컨테이너로서 아무것도 표현하지 않음. 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용할 수 있다.

 

<span>

<span> 은 <div> 엘리먼트와 아주 유사하지만 <div>는 블록-단위 엘리먼트인 반면 <span> 은 인라인 엘리먼트이다.

div와 span의 차이. div는 한 줄을 차지하고, span은 span만큼의 공간을 차지한다.

[MDN] 인라인vs블록 레벨 요소

 

 

02. CSS

  • CSS(Cascading Style Sheets, 종속형 스타일 시트)
    • 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어.
    • 하나의 스타일 선언은 속성과 그 값으로 이루어져 있음.

CSS를 HTML에 적용하는 방법

1. inline

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8" />
      <title>연습</title>
    </head>
    <body>
      <h1 style="color: blue; font-style: italic">h1/ Hello world</h1>
      <h1>h1/ Hello world</h1>
    </body>
</html>

첫 줄의 h1태그에 style이라는 속성을 부여한다.

윗 줄만 변경됨

 

2. HTML 내부에 stylesheet 작성

<style> 태그 이용. 보통 <head> 태그 안에 삽입한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>연습</title>
    <style>
      h1 {
      color: blue;
      font-style: italic;
      }
    </style>
  </head>
  <body>
      <h1>h1/ Hello world</h1>
      <h1>h1/ Hello world</h1>
  </body>
</html>

모든 h1태그에 style을 부여함.

모든 h1의 속성이 변경됨

 

3. HTML 외부에 stylesheet 작성

<link> 태그를 이용.

 

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>연습</title>
    <link rel="stylesheet" type="text/css" href="style.css"> <!-- 중요 -->
    </style>
  </head>
  <body>
    <h1>h1/ Hello world</h1>
    <h1>h1/ Hello world</h1>
  </body>
</html>

 

style.css

h1 {
  color: blue;
  font-style: italic;
}

위와 마찬가지로 모든 h1태그에 style을 부여함.

모든 h1의 속성이 변경됨

 

CSS Selector

CSS 규칙조합이 어떤 요소들에 적용될지 정의.

 

  • 형식 선택자: 주어진 이름과 일치하는 모든 요소를 선택.
    • 문법: 요소명
    • 예: input 은 모든 <input> 요소를 선택한다.
  • 클래스 선택자: class 속성의 값을 사용하여 요소를 선택.
    • 문법: .클래스명
    • 예: .index 는 클래스명이 index인 모든 요소를 선택한다.
  • ID 선택자: id 속성 값을 사용하여 노드를 선택. 문서 내에서 주어진 ID를 갖는 요소는 유일해야 함.
    • 문법: #id명
    • 예: #toc 는 id가 toc인 요소를 선택한다.
  • 통괄 선택자: 모든 노드들을 선택
    • 문법: * ns|* *|*
    • 예: * 은 문서 내 모든 요소를 선택한다.

사용 예) 아래의 문서에서 Hello와 World에 다른 스타일을 적용하고 싶을 경우

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>연습</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </style>
  </head>
  <body>
    <h1>Hello</h1>
    <h1>world</h1>
  </body>
</html>

 

style.css

h1 { color: red }

 

1. id 사용

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>연습</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </style>
  </head>
  <body>
    <h1 id="hello">Hello</h1>
    <h1 id="world">world</h1>
  </body>
</html>

 

style.css

#hello { color: red; text-decoration: underline; }
#world { color: blue; }

 

2. class 사용

클래스는 한 태그에 여러 클래스를 적용할 수도 있다.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>연습</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </style>
  </head>
  <body>
    <h1 class="red underline">Hello</h1>
    <h1 clalss="blue">world</h1>
  </body>
</html>

 

style.css

.red { color: red; }
.underline { text-decoration: underline; }
.blue { color: blue; }

 

1과 2의 결과

 

더 공부하기: [MDN] CSS를 이용한 HTML 스타일링 익히기

 

 

'JavaScript, HTML, CSS' 카테고리의 다른 글

[JS]06. setTimeout(), apply(), 함수의 type  (0) 2019.09.23
[HTML, 코드스테이츠]02. DOM  (0) 2019.09.09
[JS, 코드 스테이츠]05. Closure, Parameter, new 키워드와 객체지향 JavaScript  (0) 2019.08.26
[JS, 코드 스테이츠]04. 변수의 전달, Scope  (0) 2019.08.23
[JS, 코드 스테이츠]03. Number Methods, Math Methods  (0) 2019.08.18

'JavaScript, HTML, CSS' Related Articles

티스토리툴바