다시 초심으로 돌아가 배운다는 마음으로 이글을 쓰게되었다
먼저 처음은 어떠한 개발자나 마찬가지로 HTML CSS 부터 시작해보겠다
유튜브를 보면서 공부한 글을 올려보기
HTML , CSS : 웹을 구성하는 요소
HTML : 정보 또는 설계도
CSS : 디자인 또는 스타일링
JS : 기능과 효과
ex) 집을 지을때 건물설계도가 html 인테리어가 css 기능과 효과가 지문인식등의 기능을 함
-
프로그래밍 의미 : 컴퓨터와 소통하는 방법
컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능
웹 개발을 하기 위한 언어로 브라우저와 소통 -
웹사이트 제작시 고려 사항
- 웹 표준 : 웹 사이트를 작성할때 따라야 하는 공식 표준이나 기술 규격
- 웹 접근성 : 장애의 여부와 상관없이 모두가 웹사이트를 이용할수 있게 하 는 방식
- 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하 도록 하는 기법
복기 : 웹사이트 제작시 웹표준 웹 접근성 크로스 브라우징 을 고려해야함
HTML(Hyper Text Markup Language) 주요 태그 살펴보기
-
HTML : 웹사이트에서 ex)배너 , 로그인 , 날씨 , 언론사 등 눈에 보이는 정보나 특정구역을 설정할때 사용하는 언어
-
HTML의 변화 : 시간이지남에따라 사용되지 않는 용어들은 사라지고 시대에 맞추어 새로운 신조어가 등장
-
Not supported in HTML5 :
-
HTML 구성요소 : <열린태그 속성 ="속성값"> 컨텐츠 <닫힌태그>
속성 : HTML 태그가 가지고있는 추가 정보 , 속성값 : 속성을 바탕으로 어떤 기능을 수행할지 구체적인 명령을 내리는것확장명 : .html -
링크와 이미지 입력 , target 은 링크된 문서를 클릭했을때 문서가 열릴이미지를 명시 혹은 웹페이지를 연결하는 방식
-
공간을 만들때 사용하는 태그
- 웹사이트는 목차 , 본문 , 부록 으로 나뉘어져 있음
- header태그 : 웹사이트의 머리글을 담는 공간
- nav태그 : 네비게이션과관련된 정보들 , 메뉴 버튼을 담는 공간 , ul , li , a 와 함께 사용
- main 태그와 article 태그
- main태그 : 문서의 주요 내용을 담는 태그 IE는 지원하지 않으므로 role="main" 속성 필수 입력
- article태그 : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그 , 태그내 구역을 대표하는 타이 틀 h# 태그가 존재해야함
- footer태그 : 웹사이트의 가장 하단에 들어가는 정보를 표기할때 사 용
- div태그 : 공간을 만들때 사용
- CSS 주요 속성
- CSS : Cascading Style Sheet
- 정보(HTML) 와 디자인(CSS)
- 문서의 레이아웃과 스타일 정의
- HTMl로 작성된 정보를 꾸며주는 언어
- 구성요소 : 선택자(디자인을 적용할 HTML영역) , 속성(어떤 디자인을 적용할지 정의) , 속성값(어떤 역할을 수행할지 구체적으로 명령, 세미클론 ; 입력 필수
-
HTML 의 두가지 성격
- block 요소와 inline 요소
- 두가지를 구분짓는 세가지 주요 특징 : 줄바꿈 현상 , 가로세로 , 상하배치
- block 요소 : y축 정렬 형태로 출력 ( 줄바꿈현상이 나타나게됨 ) , 공간을 만들수 있고 상하배치 작업 가능 , 공간에대한 크기 설정 가능 ex) heigt , width
- inline 요소 : x축 정렬 형태로 출력 ( 한줄에 출력 ) , 공간을 만들수 없고 , 상하배치 작업 불가능 , 웹사이트 볼때에 중요
실습
-
태그 사용 해보기
<html> : 작성하는 모든 html태그는 이안에 작성하여야 한다 <head> 태그 : 웹사이트의 간단한 요약 정보를 담는 영역 , 웹사이트에서 노출되지 않는 정보 <body> 태그 : 웹사이트에서 눈에 보이는 정보를 담는 영역 , 이미지나 텍스트처럼 출력되는 정보 <meta charset="UTF-8"> : character setting의 약자를 나타내 문자코드 , 모든 문자를 웹 브라우저에서 깨짐없이표시 , default 값으로 넣어줘야함 <title> : 웹사이트 탭에 나타나는 제목을 적는 태그 <img>태그 : 정보성을 가지고있는 이미지를 삽입 , 닫힌태그 없음 src : 삽입할 이미지 파일 경로 , alt : 웹사이트가 이미지를 출력하지 못했을 경우 텍스트 정보로 대체 <h> 태그 : Heading의 약자로 제목이나 부제목을 표현 숫자값이 클수록 폰트 사이즈가 작음 (숫자는 정보의 중요도를 나타냄) <h1> 태그는 가장 중요한 정보를 담는다고 생각해서 하나의 html문서에 한번만 작성하는게 좋음 <h1> 잘되는지 확인 1 </h1> <h1> 잘되는지 확인 1 </h1> <h2> 잘되는지 확인 2 </h2> <h3> 잘되는지 확인 3 </h3> <h4> 잘되는지 확인 4 </h4> <h5> 잘되는지 확인 5 </h5> <h6> 잘되는지 확인 6 </h6> <p>태그 : Paragraph 의 약자로 본문 내용을 표현 , 웹사이트의 중요 정보를 담는 태그 , 나타내고자하는 내용을 태그 사이에 입력 <p> 보통 일반적으로 이곳에 본문의 내용을 표현</p> <ul>태그 : Unordered list 의 약자로 순서가 없는 리스트 생성 메뉴 버튼을 만들때 사용되는 태그 , 각각의 정보들이 동급일때 , 보통 메뉴 버튼만들때 자주 사용 <ul> <li> 리스트 1</li> <li> 메뉴 2 </li> <li> 선택 3 </li> </ul> <a href="http://www.naver.com" target="_blank"> 네이버로 이동 </a> 텍스트 입력하기 <h1> 쏠로 플레이 </h1> <p> 혼자서는 어려운 코딩 , 혼자서 해낸다는 마인드 </p> <ul> <li> 목요일에 하는 코딩 </li> <li> 김태완의 퀴즈 </li> </ul> <nav> <h1> <img src="https://t1.daumcdn.net/cfile/tistory/99D845335A0CF0B11F"style="height: 100px;"> </h1> <li><a href="#"> 홈 </a></li> <li><a href="#"> 소개 </a></li> <li><a href="#"> 연락처 </a></li> </nav> <article> <h2> 회사 소개 <p> 회사와 관련된 본문 내용 </p> </h2> </article> <div> <p> p태그 회사 </p> <p> 010 0000 0000 </p> </div> <h1> block </h1><h1> block </h1><h1> block 요소 </h1>> <a> inline </a><a> inline </a><a> inline 요소 </a>
Goodsmileman