[Publishing] HTML, CSS

seongmin·2022년 8월 23일
CSShtml
0

HTML

목록 보기
1/3
post-thumbnail

  • HTML : 구조를 표현하는 마크업 언어
  • CSS : HTML 문서에 작성된 콘텐츠를 시각화하는 스타일 시트 언어
  • JS : 웹의 동작을 구현하는 프로그래밍 언어

HTML의 기본 구조 & 문법

Tree Sturcture

-html
  -head
    -title: Page title
  -body
    -h1: hello world
    -div: contents here
     -span: Here too!

HTML은 기본적으로 트리 형태의 구조

  • div : 한 줄을 차지

  • span : 컨텐츠 크기만큼 공간을 차지

  • img : 이미지 삽입 <img src=" ~ .jpg"> 닫는 태그 X

  • a : 링크 삽입
    <a href="http://naver.com>네이버</a>

  • ul : unordered list, 점으로 표시

  • ol : ordered list, 넘버링

  • li : 트리 구조의 리스트

  • input: Text, Radio, Checkbox, Password 등의 입력폼

    name="~" : name 속성으로 그룹화 설정 시 하나만 선택 가능

  • textarea : 줄바꿈이 가능한 입력폼

  • button : 클릭가능한 버튼 생성

CSS 정리

CSS는 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 디자인하여 유저들의 이해에 도움을 줌

각 요소가 어떤 역할을 담당하는 지 쉽게 파악할 수 있도록 하는 태그가 존재한다. 이렇게 이름에 의미를 붙여 부르는 태그를 시멘틱 태그(semantic tag)라 부른다.

CSS 문법 구성

셀렉터는 특정 태그의 이름, id, 또는 class를 선택한다는 의미
요소에 적용할 수 있는 내용을 속성이라 하고, 속성명(property name)과 속성값(property value)을 사용하여 속성을 변경할 수 있음.

  • 텍스트의 가운데 정렬을 하기 위한 속성 text-align: center;

  • 글자 색을 바꾸기 위한 속성 color

  • 배경 색을 바꾸기 위한 속성 background

  • background 속성과 background-color 속성 차이
    background - 전체 배경

    background color - 지정 배경

  • em : size (ex. font, padding..)

CSS 파일 추가

<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />

  • link : HTML 파일과 다른 파일을 연결하는 목적으로 사용

CSS는 기본적으로 stylesheet이므로 rel 속성에 stylesheet 를 추가한다. href 속성에는 파일의 위치를 추가해야 한다. 한 폴더 내에 있을 경우에는 파일 이름만 입력한다.

만약 다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할 수 있다.

셀렉터(Selector)

id를 이용하여 스타일링 적용하기

id 가 있는 요소는 # 기호를 사용한다. id 는 하나의 문서에서 한 요소에만 사용

<h4 id="navigation-title">This is the navigation section.</h4>

#navigation-title {
 color: red;
}

class를 이용하여 스타일링 적용하기

<ul>
	<li class="menu-item">Home</li>
        <li class="menu-item">Mac</li>
	<li class="menu-item">iPhone</li>
	<li class="menu-item">iPad</li>
</ul>

class를 이용하는 경우에는 . 을 이용해 선택한다.

.menu-item {
  text-decoration: underline;
}

하나의 요소에 여러 class 적용하기
<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

id vs class

텍스트 꾸미기 속성

  • 색상 : color
.red {
  color: #ff0000;
}
  • 배경이나 박스에도 적용 가능
.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}
  • 글꼴 : font-family
.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
  • 크기 : font-size
.title {
  font-size: 24px;
}

단위

  • 절대 단위: px, pt 등
  • 상대 단위: %, em, rem, ch, vw, vh 등

  1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
    px 를 사용한다.

  2. 일반적인 경우
    상대 단위인 rem 을 주로 사용한다.

기타 스타일링

  • 굵기: font-weight
  • 밑줄, 가로줄: text-decoration
  • 자간: letter-spacing
  • 행간: line-height

정렬

  • 가로 정렬 : text-align 유효한 값 - left right justify (양쪽 정렬)
  • 세로 정렬 : vetrical-algin but, 부모 요소의 display 속성이 반드시 table-cell 이어야 함

박스 모델

웹 페이지 내의 모든 콘텐츠는 고유의 영역을 가지고 있다. 이 영역을 박스(box)라고 부른다.

박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다.

줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

  • 줄바꿈이 되는 태그: <h1> <p> <div> <ul> <li>
  • 줄바꿈이 되지 않는 태그: <span> <a> <strong> <img>

박스를 구성하는 요소

border(테두리)

p {
  border: 1px solid red;
}

border 속성에 적용된 각각의 값은 테두리 두께(border-width) 테두리 스타일(border-style) 테두리 색상(border-color)

  • 테두리 점선 : border-style의 값 dashed

  • 테두리 둥근 모서리 : border-radius: 10 px;

  • 박스 바깥쪽에 그림자 (그림자를 명확하게 보기 위해서는 background 속성이 불투명해야함)
    box-shadow: 5px 5px;

margin(바깥 여백)

  • 각각의 값은 top, right, bottom, left로 시계방향
p {
  margin: 10px 20px 30px 40px;
}
  • 값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px
p {
  margin: 10px 20px;
}
  • 값을 하나만 넣으면 모든 방향의 바깥 여백에 적용
p {
  margin: 10px;
}
  • 바깥 여백에는 음수 값을 지정할 수 있다. 여백에 음수 값을 지정하면 다른 요소와의 간격이 줄어든다. 
p {
  margin-top: -2rem;
}

padding(안쪽 여백)

  • 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left이다.
p {
  padding: 10px 20px 30px 40px;
}

박스를 벗어나는 콘텐츠 처리

overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성한다. 넘치는 콘텐츠의 내용을 나타내고 싶지 않을 경우에는 overflow 속성에 hidden 값을 사용

p {
  height: 40px;
  overflow: auto;
}
  • 레이아웃 디자인을 조금 더 쉽게 하는 방법 : 여백과 테두리 두께를 포함한 박스 계산법으로 *은 모든 요소를 선택하는 셀렉터로 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가한다.
* {
  box-sizing: border-box;
}

이렇게 모든 요소에 box-sizing: border-box 를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.

profile
seongmin
다음 포스트

페이지 레이아웃 & 웹 앱 화면 설계

0개의 댓글