[Section 1] Development 기초 - HTML, CSS

dohyoungK·2023년 4월 12일
0

1. HTML

HTML이란, tag들의 집합으로, 웹 페이지의 구조를 표현하는 마크업 언어

  • 자주 쓰이는 태그

태그설명
<div>한 줄을 차지하는 공간 생성
<span>컨텐츠만큼의 공간 생성
<img>이미지 삽입
<a>링크 삽입
<ul> & <li>순서 없는 목록 & 목록 항목
<input>사용자 입력(Text, Radio, Checkbox)
<textarea>텍스트 공간 생성
<button>버튼 생성



2. CSS

CSS란, 웹 페이지의 구조에 스타일과 레이아웃을 정의하는 스타일시트 언어

  • CSS 사용 목적

    : CSS를 통해 UI(User Interface)를 개선함으로써 가독성을 높여 좋은 UX(User eXperience)를 이끌어내기 위함이다.

  • CSS의 기본 문법 구성

body(=셀렉터){
	color(=속성명): red(=속성 값);
}

  • 셀렉터의 사용법

    1. id를 붙여 스타일링

    : HTML 문서에 <div> 와 <p>, <span> 등의 태그가 여러개 존재할 때, 그 중 특정 요소만 스타일링을 하기 위해 사용하는 방법

    • HTML 문서의 태그에 id를 붙인다.
      <p id="main-paragraph">This is main paragraph.</p>
    • # 기호를 사용해 id가 있는 요소를 선택한다.
      #main-paragraph {
          color: red;
      }

    2. class를 지정해 스타일링

    : 여러 요소에 같은 id를 부여하지 못하기 때문에 여러 같은 요소를 스타일링 하기 위해 사용하는 방법

    • HTML 문서의 태그에 class를 지정한다.
    <ol>
     	<li class="fruit">Apple</li>
     	<li class="fruit">Banana</li>
    </ol>
    • . 기호를 사용해 class가 지정된 요소를 선택한다.
    .fruit {
        color: red;
    }

    3. 여러 class를 하나의 요소에 적용하기

    : 여러 class를 하나의 요소에 적용하기 위해 사용하는 방법

    • HTML 문서의 태그에 띄어쓰기로 다른 class를 지정한다.
    <ol>
     	<li class="fruit selected">Apple</li>
     	<li class="fruit">Banana</li>
    </ol>
    • . 기호를 사용해 class가 지정된 요소를 선택한다.
    .selected {
        color: red;
    }

  • 텍스트 관련 속성

속성명설명
color텍스트 색상 변경
font-family글꼴 변경
font-size텍스트 크기 변경(단위는 rem추천)
font-weight텍스트 굵기 변경
text-decoration밑줄, 가로줄
letter-spacing자간 변경
line-height행간 변경
text-align가로 정렬



  • 박스 모델

    : 웹의 모든 컨텐츠가 가지는 직사각형 박스 형태의 영역

    • 줄 바꿈이 되는 박스: block (<h1> <p>)
    • 줄 바꿈없이 옆으로 붙는 박스: inline, inline-block (<span>)
      (inline은 width, height 속성을 사용 불가능, inline-block은 width, height 속성 사용 가능)

  • 박스 구성 요소

    • margin: 바깥 여백
    • border: 박스 테두리
    • padding: 안쪽 여백
    • content: 박스 내 컨텐츠

  • 박스보다 큰 컨텐츠 처리

    overflow: auto;를 사용하면 크기가 큰 컨텐츠를 스크롤을 통해 표시 가능

  • 레이아웃 디자인을 더 쉽게 하는 방법

    box-sizing: border-box;를 HTML 문서 전체에 사용하면 모든 박스에서 여백과 테두리를 포함하는 박스 크기를 계산한다.

0개의 댓글