HTML & CSS

김소정·2022년 5월 11일
0


본 포스팅은 YBIGTA DA 19기 이은지님의 발제 자료를 바탕으로 작성되었습니다.

HTML

HyperText Markup Language
웹페이지의 구조를 정의하는 언어

기본 구조

웹페이지에 대한 메타 데이터
이 안에 작성한 재용은 사용자들에게 보여지지 않음

body

사용자들에게 보여지는 영역 중 가장 상위의 태그
사용자들에게 보여주는 모든 내용을 이 안에 작성

맥북의 경우 html 확장자 파일에 html:5를 입력하면 다음과 같은 기본 구조가 자동으로 작성된다.

titleYBIGTA DA SESSION으로 변경해주면

위와 같이 웹페이지 이름이 바뀐다!

Tag

각 요소를 하나의 태그로 나타냄

<p>My cat is very grumpy</p>

태그는 Opening tag, Closing tag, Content 세가지로 이루어져 있다.
위 예시에서는 <p>가 Opening tag, </p>가 Closing tag, My cat is very grumpy가 Content이다.

사용 방식

  • 여러 개의 태그를 중첩해 사용

    <body>
        <div> <!-- 부모 요소 -->
            <h1>타이틀</h1> <!-- 자식 요소 -->
        </div>
    </body>
  • 요소 각각에 속성을 지정 가능

    class 속성

    <p class="editor-note">My cat is very grumpy</p>

    요소 각각에 이름을 붙여줄 수 있음
    추후 css를 활용해 요소에 서식을 지정해줄 때 사용

    이벤트 속성

    <button onclick="alert('Hi!')">
        Click!
    </button>

    요소에 특정한 동장(이벤트)이 발생했을 때 실행할 메소드 지정

종류

섹셔닝

  • div 태그
    웹사이트의 레이아웃을 만들 때 주로 사용
    그 외에도 <SECTION>,<article>,<header>


본문 구성

  • h1~h6
    Heading 제목용 태그

  • p 태그
    Paragraph 본문용 태그로, p태그로 묶은 내용은 하나의 단락이 되며 단락 사이에는 자동으로 간격이 생김

  • ul, ol, li
    ul: unordered list
    ol: ordered list
    li: <ul>, <ol> 내부에 리스트 각 항목을 표시

  • img 태그, a 태그

    과제해볼까?를 누르면 런어스로 들어가집니다.. 과제 할 생각에 행복하네요 🥹


사용자의 동작을 감지하는 요소

  • button 태그
    onclick 속성에 메소드를 지정하면 해당 버튼이 클릭되었을 때 메소드가 실행됨

    onclick="메소드명"
  • input 태그
    사용자로부터 정보를 입력 받을 때 사용

    type 속성을 통해 입력 받는 정보 종류 지정 가능
    ex. text, password, color, checkbox

    placeholder 속성을 통해 입력창의 안내문구 지정 가능


CSS

Cascading Style Sheet
웹 페이지 내 요소들의 서식을 지정하는 언어

분류

인라인 스타일
태그 각각에 스타일을 지정

<p style="color: white; background: royalblue"> 연세대학교의 상징색은 로얄블루입니다.</p>

내부 스타일시트
HTML <head></head> 안에 css를 작성

외부 스타일시트
별도의 .css 파일을 작성해 HTML <head></head> 부분에서 HTML 문서와 연결

속성

width, height

요소의 너비와 높이를 지정 (div, img, button 등)

  • px(pixel): 절대단위
  • em: 부모 요소의 글꼴 크기에 비례
  • rem: 루트 요소의 글꼴 크기에 비례

태그에 class 속성으로 태그별 이름을 설정, 그걸 활용해 원하는 요소를 골라 서식을 입힌다.

css 파일을 따로 작성해 link를 통해 HTML과 연결해주었다. 절대단위인 픽셀을 이용해 각 버튼의 크기를 조정하였으며, 잘 적용된 모습을 확인할 수 있다.

특정 태그에 일괄적으로 서식 적용

margin, padding
요소의 여백을 설정 (바깥쪽, 안쪽)
상, 하, 좌, 우 네 방향을 한 번에 설정할 수도 있고, 방향마다 다른 크기로 설정할 수도 있음

margin: 20px;
/* 상, 하, 좌, 우 모두 마진 20px */
  
margin: 10px 20px 30px 40px
/* 시계 방향으로 위, 오른쪽, 아래, 왼쪽 순서 */

글자

  • font-size
  • font-weight
  • font-family

배경

  • background-color
  • background-image
profile
Yonsei University, Applied Statistics

0개의 댓글