HTML & CSS 1

이용준·2022년 10월 24일
ElementsW3C schoolformhtmlmarkup
0

HTML&CSS

목록 보기
1/1
post-thumbnail

HTML(뼈대)

1.개요

들어가기 전
웹 개발 초기는 프론트/백엔드의 구분이 없었으나 웹 개발 기술이 발전함에따라 각 기술들의 내용의 세분화되었다.
따라서 점차 복잡해지는 웹 개발의 영역을 구분해야할 필요성 대두되었다.
이러한 구분에도 불구하고, 각 영영의 개발자는 상대 영역의 기본적인 내용에 대해 인지하고 있어야 하며 이는 웹 서비스는 프론트엔드 개발자와 백엔드 개발자의 협업을 통해 만들어지는 것이기 때문이다.

  • 이 과정에서는 HTML과 CSS에 대해서만 다루도록 한다.

HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어 이다.
쉽게 말해 웹 페이지의 프레임(뼈대)를 정해진 규칙대로 기술하며, 전체적인 구조를 담당한다.

마크업 언어란 태그를 이용해 문서나 데이터의 구조를 명기하는 언어의 한가지로 문서의 구조를 표현하는 방법(체계)으로 알아두자.

2. 학습목표

  • HTML이 "구조를 표현하는 언어"라는 것을 이해하고, 그 기본 구조와 문법을 설명할 수 있다.
    • HTML이 마크업 언어라는 것을 설명할 수 있다.
    • 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
      • div,<span>,<ul>, <ol>, <li>, <input>등
    • 시맨틱 태그가 무엇인지 이해하고, 왜 사용하는지 설명할 수 있다.
    • 웹 문서의 구조와 내용을 HTML로 작성할 수 있다.
  1. HTML의 기본 구조와 문법
    <html>      				  # 해당 문서가 html 문서임을 명시
	<head>       		 	   # html의 시작 태그로, 문서 전체의 틀을 구성
   	<title>page title</title>  # 문서의 제목
   </head>    				   # </태그이름>은 해당 태그가 끝났음을 의미
   <body>					   # 문서의 내용을 담는 곳
   	<h1>Hello World</h1>       # heading을 의미하며, 1-6까지 크기 조절 가능
       <div> contents here.    # content division을 의미하며, 줄바꿈 포함
       	<span>Here too!</span> # 줄바꿈이 없는 contnet 컨테이너
       </div>
   </body>						# </> 태그 종료
</html>

3. 자주 사용하는 HTML 요소

태그설명비고
<div>Division콘텐츠 길이와 상관없이 한 줄 차지(줄바꿈)
<span>Span콘텐츠의 길이만큼 줄 차지(줄바꿈 없음)
<img>Image이미지 삽입
<a>Linkhref 요소를 사용해 링크 삽입
<ul>&<li>Unordered List & List Item순서 유무 리스트
<input>Input(Text, Radio, Checkbox)type 속성을 사용해 다양한 형태 변경
<textarea>Multi-Line Text Input글상자로 줄 바꿈 가능한 입력 폼
<button>button버튼

  • 예시 - 입력 폼

    <input type = 'text' placeholder = "type here">
 <div> 
	<input type='radio' name='choice' value='a'>
    <input type='radio' name='choice' value='b'>
 </div>   
 <textarea></textarea>
 <div>
 	<input type='checkbox' checked>checked
    <input tpye='checkbox' unchecked> unchecked
 </div>

    HTML 연습문제(W3 Schools)
    HTML, CSS, SQL, JAVA, PYTHON 등 코드 예시와 테스트


CSS(디자인)

1.학습 목표

  • CSS의 사용 목적을 이해하고, 기본적 문법과 구조 설명
  • HTML에 CSS를 적용하는 방법에 대한 이해
  • 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유 설명
  • CSS를 이용해 기본 텍스트 꾸미기
  • 기본적인 CSS 박스 모델 이해 및 설명하기
  • MDN, W3C school 등의 레퍼런스를 이용해 CSS 속성 검색 및 사용

2.CSS와 프론트엔드 개발

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.

HTML로 웹 구조를 잘 세우고, 더 나은 사용자 경험(UX)을 제공하기 위해 CSS로 UI와 레이아웃을 적절히 구성하면 더 나은 웹 페이지를 완성할 수 있을 것이다.

CSS 특징?

  • 좋은 사용자 경험을 제공하기 위한 도구이다.
    • 같은 파일이라도 레이아웃과 문단 간격 조절만으로도 가독성이 높아지며, 이는 전달력에 차이를 준다.
  • 사용자 인터페이스(UI, User Interface)
    • 인터페이스란 컴퓨터와 교류하기 위한 연결고리이다.
    • 사용자 입장에서 편리하게 조작할 수 있는 시각적 도구를 만들고, 사용자의 입장에서 편의를 생각한다.
  • 직관적이고 쉬운 UI 제작
    • 아무리 훌륭한 내부 기능을 갖더라고, UI가 없으면 소용이 없다.
  • 좋은 UX는 직관적이고 쉬운 UI에서 나온다.
  • CSS는 어럽다?
    • css 고유의 복잡성이나 상충하는 부분을 최소화하기 위해 모범 사례(best-practices)가 만들어 졌으며 앞으로 계속 발전해 나갈 것이다.

3.CSS 따라하기

  • step1)

  • setp2)

  • step3)

    줄바꿈이 되는 block 와 옆으로 붙는 inline, line-block에 대해 생각해보자

    • css - display

    • 세가지 박스의 특징

      display 방식blockinline-blockinline
      줄바꿈 여부OXX
      기본적 너비(width)100%글자만큼글자만큼
      width, height 사용 가능 여부OOX
profile
이용준
뚝딱뚝딱

0개의 댓글