[SEB BE] HTML & CSS 기초

zirryo·2022년 6월 27일
CSShtml프론트엔드
0

⚡️ STUDY

목록 보기
1/15
post-thumbnail
week 1 / 22.06.27

Front end

백엔드 개발을 목표로 하더라도 협업과정에서 상대 파트에 대한 기본적인 이해는 필요하기 때문에 프론트엔드 웹 개발에 주로 사용되는 HTML CSS JS 에 대한 기초 지식이 필요하다.

HTML

💿 HTML 개요

  • HTML : HyperText Markup Language
  • 웹 페이지 내용&뼈대를 정해진 규칙대로 기술하는 언어로, 프로그래밍언어가 아닌 마크업 언어이다.

💿 구조

  • HTML 문서는 요소(element)로 구조화한 일반 텍스트 문서이다.
  • 요소는 한 쌍의 태그로 열고 닫으며, 각각의 태그(tag)는 부등호(<>)로 감싼다.
  • cf ) img는 셀프 클로징(self closing)으로, 태그 하나 사용.<tag/>
  • 계층 구조, 트리 구조를 가진다. 자식 태그가 닫혀야 부모 태그를 닫을 수 있다. 
<html>
	<head>
    	<title>page title</title>
    </head>
    <body>
    	<h1>h1</h1>
        <div>content1
        	<span>content2</span>
        </div>
    </body>
</html>
  • <html> : HTML의 루트(최상단 요소), 루트 요소라고도 함.
    다른 요소는 모두 <html>요소의 후손이다.
  • <head> : 기계가 식별할 수 있는 문서 정보(메타데이터)를 포함한다. 정보는 제목, 스크립트, 스타일시트 등이 있다.
  • <title> : 브라우저의 제목 표시줄, 페이지 탭에 보이는 제목.
  • <body> : 문서의 내용을 나타낸다. 한 문서에는 하나의 <body>만 존재한다.
  • <h1> : <h1> ~ <h6> 은 6단계의 구획 제목을 표현한다. h1이 가장 높은 단계.
  • </tag> : 해당 태그가 끝났음을 선언한다.

💿 Tag 태그

  • 수 많은 태그가 있기 때문에 모든 태그를 외우는 것 보다는 주로 사용되는 것만 익히고, 나머지는 필요할 경우 찾아서 활용
  • html tag 목록 / 요소 참고서
  • 자주 사용하는 HTML 태그
    • <div> : 한 줄을 차지함. 통용 컨테이너.
    • <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획. 예제, 목차, 색인 등
    • <link> : 현재 문서와 외부 리소스의 관계 명시.
    • <span> : 컨텐츠 크기만큼 자리 차지함. 통용 인라인 컨테이너.
    • <img> : 문서에 이미지 삽입.
    • <a> : 앵커, href 특성을 통해 다른 페이지나 특정 위치로 연결하는 하이퍼링크를 만든다.
    • <p> : 하나의 문단.
    • <li> : 목록의 항목.
    • <ul> : 정렬되지 않은 목록. 불릿으로 표현됨.
    • <ol> : 정렬된 목록. 숫자 목록으로 표현됨.
    • <header> : 소개 및 탐색에 도움을 주는 콘텐츠. 제목, 로고, 검색폼, 작성자 등.
    • <footer> : 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타낸다. 구획의 작성자, 저작권 정보, 관련 문서 등.
    • <textarea> : 멀티라인 텍스트 입력.
  • semantic tag
    : 명확한 의미를 가진,의미론적 태그. 가독성을 향상시키며 SEO에도 영향을 준다.
    ex) <header> , <article> , <mark>

💿 태그 분류

  • block : 한 줄 차지(width 100% defalut), 줄 바꿈 발생
    <Div> , <p> , <h1> , <ul> , <li> 등
    더알아보기
  • inline : 컨텐츠만큼 차지, 줄 바꿈 없음(한 줄에 요소 여러개 배치 가능)
    <span> , <a> , <em> 등
    더알아보기
  • inline-block : block 요소처럼 크기를 가짐. 줄 바꿈 없음(한 줄에 요소 여러개 배치 가능)
    <img> , <input> , <buttton> 등

CSS

📀 CSS 개요

  • CSS : cascading style sheets
  • 웹 애플리케이션의 구조에 디자인을 적용하는 역할을 한다. 웹 페이지 스타일링
  • 독립적으로 동작할 수 없으며, HTML을 필요로 한다.

📀 UI & UX

  • UI : User Interface, 컴퓨터를 작동시키는 명령이나 기법을 표현하는 사용자 환경.
  • UX : User Experience, 사용자가 시스템 및 서비스를 이용하면서 느끼고 생각하게 되는 총체적 경험. UI가 기술과 경험을 매개한다.

📀 구조

body {
	color: red;
    font-size: 30px;
}

body : selector 셀렉터
{~} : Declaration Block 선언 블록
color: red; : Declaration 선언
font-size : >Property 속성명
30px : Value 속성값
; : 선언 구분자

📀 속성

  • HTML과 마찬가지로 🔗수많은 속성들이 있다. 주요 속성들만 익히고, 다른 속성들은 필요시 찾아보는 것이 유용하다.
    - color : 텍스트의 색상을 변경. HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름을 속성 값으로 가짐.
    - font-size : 글자의 색상을 변경.
    - font-family : 글꼴의 속성. 폰트 변경.
    - overflow : 컨텐츠의 내용이 박스보다 많을 경우 처리 방식 선택.
    .red {
  color: #ff0000;  /* 글자 색상 */
}

    red class의 color 속성에 #ff0000 값을 할당

    .box {
  background-color: #aa33ee; /* 배경 색상 */
  border-color: #55aaff; /* 테두리 색상 */
}

    box class의 background-color 속성에 #aa33ee 값을 할당
    box class의 border-color 속성에 #55aaff 값을 할당

📀 스타일 적용

  • 3가지 스타일 적용법 존재
  1. 인라인 스타일 : 같은 라인에서 스타일 적용
    <nav style="background: #eee; color: blue">...</nav>
  2. 외부 스타일 시트 : <link> 태그 안에서 href 속성을 통해 파일을 연결. (권장)
    <link rel="stylesheet" href="index.css" />
  3. 내부 스타일 시트 : CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 내에 작성

📀 Selector 셀렉터

  • #id : 하나의 문서에서 하나의 요소에만 할당. 이름에는 가능한 의미를 부여하여 구분하기 쉽도록 한다. 
    <h4 id="navigation-title">This is the navigation section.</h4>

    특정 h4에 id 할당.

    #navigation-title {
  color: red;
}

    id로 요소를 선택하여 스타일링.

  • .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로 요소를 선택하여 스타일링.

  • 우선순위 (5:high >>> 0:low)

    5 : !important
    4 : Inline style(style attribute in HTML)
    3 : ID(#) selector
    2 : class(.), pseudo-class(:) selector
    1 : element selector(p,div,li,etc)
    0 : universal selector(*)
    높은 우선순위를 가진 스타일링이 적용됨.
    같은 레벨 다중 적용시 가장 아래 라인 적용

📀 Box Model 박스 모델

  • Box : 박스는 항상 직사각형으로, 너비(width)와 높이(height)를 가진다. CSS를 이용해 속성 & 값으로 크기 설정.

  • Box Model

    Margin : border 밖의 여백
    Border : 테두리
    Padding : border 안의 여백

  • Border : 각 영역이 차지하는 크기를 파악할 수 있고, 레이아웃을 만들면서 그 크기를 시각적으로 확인 가능.

    • 두께border-width, 스타일border-style, 색상border-color 등 border 속성에 다양한 세부 속성을 추가할 수 있다.
  • p {
  border: 1px solid red;
}

    두께 1px , 실선 스타일 , 색상 red 적용

  • Margin, Padding : 태그에 여백을 준다. 순서는 top right bottom left 시계방향. 

  • p {
  margin: 10px 20px 30px 40px;
}

    상 10px 우 20px 하 30px 좌 40px 각각 적용
    항목이 두 개일 경우 상하/좌우로 적용, 한 개일 경우 모두 동일 적용.

📀 박스 크기 측정

  • Content Box : 박스의 크기를 측정하는 기본값.
  • Border Box : 모든 박스에서 여백과 테두리를 포함한 크기로 계산. HTML 문서 전체에 적용 (권장)

  •  {
  box-sizing: border-box;
}

    여백과 테두리를 고려한 계산법 border-box를 적용하는 코드
    전체 선택 셀렉터 *로 문서 전체 적용

profile
zirryo
다음 포스트

[SEB BE] Page Layout / Flexbox

0개의 댓글