Post

[HTML/CSS] 기초모듈(1)

[HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지] codingapple.com

Posted Updated
By Cheong seolmo
4 min read
[HTML/CSS] 기초모듈(1)

HTML 기초와 개발환경 셋팅

  • Visual Studio code 에디터 사용
  • HTML: Hypertext Markup Language. 마크업 언어는 자료의 구조를 표현하기 위한 언어.
  • 작업할 폴더를 만들어 개발환경 셋팅
  • index.html 파일 생성
    1
2
3
4
5
6
7
8
9
10

      <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
     안녕하세요
  </body>
  </html>
  • 미리보기로 띄우고 싶다면
    1. ‘Live Server’ Extension 설치
    2. 파일명 우클릭 > ‘Open with Live Server’

HTML 기본 태그로 글 작성해보기

  • 웹표준 - 웹페이지를 만들 때 모든 요소는 태그 안에 넣어야 한다
  • <p>본문</p> tag: paragraph의 약자
  • <h1>제목</h1> tag: heading의 약자(1~6까지)
  • <img src="이미지 경로"> tag: 속성을 통해 이미지를 나타내는 태그
  • <button>버튼이름</button> tag: 버튼을 담는 태그
  • <a href="주소">링크이름<\a> tag: anchor의 약자. 속성을 통해 링크로 이동하는 태그
  • <ul><li>리스트</li><ul> tag: unordered list의 약자, list item의 약자
    번호를 자동으로 매기고 싶다면 <ol><\ol> tag: ordered list의 약자
  • 태그 안에 태그 넣는 것도 가능
    • 이미지를 누르면 링크로 이동하게 한다면 <a href="주소"><img src="이미지 경로"><\a>
  • index.html
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

      <body>
  
  <h3>어서오세요</h3>
  <p>안녕</p>
  <button>버튼</button>
  <a href="https://choisunmi00.github.io/">링크</a>
  <ul>
      <li>항목1</li>
      <li>항목2</li>
  </ul>
  <img src="winter.png">

  <a href="https://choisunmi00.github.io/">
      <img src="winter.png">
  </a>

  </body>

글자의 일부를 누르면 네이버로 이동(숙제)

  • index.html
    1
2
3
4
5
6

      <body>
    
  <h3>어서오세요</h3>
  <p>안녕하세요 <a href="https://naver.com">이동하기</a></p>

  </body>

기본적인 웹페이지 스타일링

  • HTML을 꾸밀 땐 style 속성.
    • 스타일명:값;: 각 항목은 ;으로 구분
    • 이미지 가운데 정렬
      1
2
3
4

        display: block;
  margin-left: auto;
  margin-right: auto;
    • 글자 자간 조절 letter-spacing: 1px;
    • 글자 가운데 정렬 text-align: center;
    • 일부 글자만 스타일링: 태그 안에 태그. <span><\span> (글자를 감쌀 수 있는 의미 없는 태그)
    • index.html
      1
2
3
4
5
6
7
8
9
10

        <body>
  
  <img src="winter.png" style="width: 100px; margin-top: 30p; 
          display: block;
          margin-left: auto;
          margin-right: auto;">
  <h3 style="font-size: 50px; color:rgb(43, 43, 43); text-align: center;">Cheong Seolmo</h3>
  <p style="text-align: center"><span style="font-weight: 900">Fullstack </span> <strong>Developer</strong></p>
        
  </body>

소개글 스타일링(숙제)

  • index.html
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

      <body>
  
  <img src="winter.png" 
      style=
          "width: 100px; 
          margin-top: 100px; 
          display: block;
          margin-left: auto;
          margin-right: auto;">

  <h3 style="font-size: 50px; color:rgb(43, 43, 43); text-align: center;">Cheong Seolmo</h3>
  <p style="text-align: center">
      <span style="font-weight: 900">Fullstack </span> 
      <strong>Developer</strong>
  </p>
  <p style="text-align: center; color:rgb(231, 16, 16)">요즘 쏜애플 듣는 게 맛있다</p>

  </body>

  • img

    3

CSS 파일 만들고 첨부하는 법

  • CSS: Cascading Style Sheet
  • 긴 style을 정리하기 위해 CSS 파일 활용
    1. <link>로 CSS 파일 연결
    2. CSS 파일에 style (중괄호 안에) 작성 후 작명(.이름)
    3. class 속성을 통해 html 파일에서 사용
  • CSS selector
    • class selector: CSS 파일에 점(.) 찍고 작명, 중복 X
    • tag selector: CSS 파일에 p으로 작명하면 모든 p tag에 적용
    • id selector: CSS 파일에 #으로 작명하면 html에서 id=통해 사용 가능
  • 여러 개의 스타일이 겹칠 경우 우선순위 style(직접 넣기)> id selector > class selector > tag selector
Web, HTML/CSS
lecture
This post is licensed under CC BY 4.0 by the author.