HTML/CSS
1.웹개발과 HTML
여러 대의 컴퓨터를 하나로 연결해주는 거대한 통신망인터넷 상의 컴퓨터들 간에 정보를 공유할 수 있도록 해주는 네트워크 시스템인터넷과 웹을 통해 공유할 웹 사이트를 만드는 일그리고 이를 서비스하기 위해 필요한 다양한 환경을 구축하는 일HTML과 CSS를 이용해 만든 화면
2.HTML 기본 문법
태그명 (이름)시작 태그(여는 태그)끝 태그(닫는 태그)콘텐츠<태그명>콘텐츠</태그명>\*컨텐츠 생략이 가능할 때 사용 \*아래 2가지 모두 사용 가능<태그명> <태그명 />태그 이름은 소문자로 작성여는 태그와 닫는 태그를 정확히 입력태크의 콘텐츠
3.HTML 문서 기본구조
head : 문서의 정보를 기입body : 문서의 내용을 기입<head> 문서의 정보 </head> <body> 문서의 내용 </body> 문서 타입(DOCTYPE) 작성<!DOCTYPE html>
4.텍스트 표시하기
문단 요소를 나타내는 태그로 하나의 문단을 표현각각의 P 태그로 이루어진 문단 사이에는 여백이 있음<p> 컨텐츠 </p>예시코드 구현 화면제목 요소를 나타낼 때 사용하는 태그로 숫자와 함께 사용숫자 1일 때 크기가 가장 크고 6일 때 가장 작음<h1>
5.요소의 구분과 인라인 텍스트 요소
블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성ex) <p> , <h1> 등인라인 요소 : 자기에게 필요한 만큼의 공간만을 차지ex)<em> , <strong> 등예시 코드 구현 화면🔎추가 확인개발자 도구로 확인 시 블록
6.컨테이너 전역속성
콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할콘텐츠 내용을 구분하거나 공통적인 스타일 적용 시 사용🔎 컨테이너 코드<div> </div> : 블록 레벨 컨테이너<span> </span> : 인라
7.이미지 표시하기
이미지를 표시할 때 사용하는 태그로 단일태그표시할 이미지에 대한 정보를 속성으로 지정해야 함src 속성 : 이미지의 위치정보와 파일명, 즉 url<img src="url">동일 폴더 내 있을 경우 파일명만 작성<img src="url">하위 폴더 내 있을 경
8.링크 표시하기
a 태그 요소는 다른 페이지, 이메일 주소 등 다양한 유형의 콘텐츠로 연결되는 링크 역할href 특성href 특성을 이용해 이동하고자 하는 주소(링크)를 연결<a href="url"> 컨텐츠 </a>target : 새로운 문서를 열 때 현재 탭에서 열지 새
9.목록 만들기
HTML 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분두 개의 목록 모두 공통으로 항목은 <li> </li> 태그로 나타냄<ul> </ul><ol> </ol>start 속성 : 넘버링 시작 번호 지정 <ol start="
10.표 만들기
표는 행과 열로 이루어진 구조로, 행과 열이 만나는 셀(cell)이 콘텐츠를 나타내는 최소 단위<table> : 하나의 표<tr> : 하나의 행<th> : 행 안에서 제목에 해당하는 셀<td> : 행 안에서 내용에 해당하는 셀예시 코드 실행 결과
11.입력태그 <input>
웹브라우저 화면을 통해 사용자가 데이터를 입력할 수 있도록 하는 입력 요소 중 대표적인 요소 input 태그의 핵심은 type 속성!<input type="데이터 유형">지정한 type 값에 따라 목적이나 형태가 변경됨text : 디폴트값, 생략가능, 텍스트 입력
12.<input> 외 입력 태그들
다수의 옵션(선택지)를 포함하여 드랍다운을 제공<select> 태그 내부에 <option> 태그를 사용해서 옵션을 표시value 속성을 통해 각 옵션에 값 구별 필수!<select> <option value="값1"> 항목1</option>
13.입력폼 만들기
form 태그는 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출(submit)함.form 태그가 역할을 수행하기 위해 속성 사용이 필요함.action : 입력값을 전송할 서버의 url 입력method : 입력한 데이터를 어떤 식으로 전송할지?<form acti
14.시맨틱 태그
시맨틱 태그의 역할은 개발자와 브라우저에게 의미를 제공태그명은 이 요소가 가진 목적이나 역할은 무엇인가를 나타냄대부분의 시맨틱 태그는 컨테이너 태그와 같이 특별한 스타일을 제공하지 않음검색 엔진은 시맨틱 태그(태그명)를 중요한 단서로 본다.시각 장애가 있는 사용자가 화
15.메타 데이터
meta 태그는 HTML 문서에 대한 메타데이터를 정의항상 head 태그 안에 위치하며 문자 세트, 페이지 설명, 키워드, 문서의 작성자 및 뷰포트 설정을 지정검색엔진이 페이지를 검색할 때 참고 가능함문자 인코딩에 대한 요약 정보를 기입하는 속성http란 인터넷에서 데
16.CSS 소개 및 기본 문법
Cascading : 폭포같은, 계속되는, 연속적인Style : 멋을 내다Sheet : (종이나 문서) 한 장즉, 연속적으로 스타일을 정의하는 문서CSS 코드는 다수의 스타일 선언문으로 구성선택자 {속성명: 속성값;}선택자 : 어떤 요소에 스타일을 적용할 것 인지{}
17.CSS 문서 사용하기
CSS 문서는 독립적으로 존재할 수 있지만 HTML 문서와 함께 사용하지 않으면 텍스트 문서일 뿐임즉, CSS 문서에 정의된 스타일이 웹 브라우저 화면을 통해 보여지기 위해서는 반드시 HTML 문서 작성이 선행되어야함1️⃣ 인라인 스타일 : 태그에 직접 기술태그에 st
18.선택자 기본편
선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정참고 HTML 문서1️⃣ 전체 선택자 (\*) : 문서 내 모든 요소를 선택2️⃣ 태그 선택자 (태그명) : 특정 태그로 만들어진 모든 요소를 선택3️⃣ 클래스 선택자 (.클래스값) : 특정 클래스 값이 지정
19.박스모델이란?
너비와 높이를 가지는 개별 요소를 가리켜 '박스'라 표현,박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용 가능CSS는 영역 별로 크기를 따로 설정할 수 있도록
20.테두리 스타일
테두리 스타일을 정의할 때는 단축 속성인 border를 사용하거나 border의 하위 속성을 개별적으로 사용함border-width : 테두리의 두께를 지정(수치와 단위 사용)border-style : 테두리의 모양을 지정(점선, 실선, 겹선 등)border-color
21.여백 다루기
테두리를 기준으로 안 쪽 여백은 padding, 바깥 쪽 여백은 margin여백의 크기를 제어하는 방법은 동일함 1\. 여백의 모든 면에 동일한 값 지정 2\. 상하여백과 좌우여백을 각각 지정 3\. 위쪽 여백, 좌우여백, 아래쪽 여백을 차례로 지정 4\. 위쪽, 오른
22.배경 다루기
박스 모델에 배경으로 추가된 색상이나 이미지 등은 기본적으로 margin 영역을 제외한 나머지 영역 안에서 적용다양한 하위 속성들을 사용해서 컨트롤이 가능background-접미사 형태로 사용 가능\-color : 배경 색상 지정\-clip : 배경 적용 범위conte
23.색깔을 지정하는 다양한 방법
색 지정 방법은 글자 색, 테두리 색, 배경 색 모두 동일키워드 : 색상을 나타내는 키워드(영단어) 입력rgb 함수 : rgb 함수에 수치 입력red, green, blue의 줄임말투명도를 추가 지정할 수 있는 rgba 함수도 사용 가능a는 0~1 중 소숫점으로 사용h
24.텍스트 꾸미기
font-family 속성을 사용해서 텍스트의 글꼴을 정의한 개 이상의 글꼴을 지정할 수 있음입력한 글꼴 뒤에 쉼표를 입력한 후에 새로운 글꼴을 이어서 입력가장 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용웹 폰트란 컴퓨터 시스템에 해당 폰트가 설치되어 있지 않은 경우에
25.요소의 유형<display>
display 속성은 요소의 유형을 변경none : 요소를 화면에 표시하지 않음block : 요소를 블록 레벨 요소로 지정inline : 요소를 인라인 요소로 지정inline-block : 요소를 인라인 요소로 표시하되, 블록 레벨의 특성을 추가inline처럼 전후 줄
26.문서의 흐름<float>
웹 요소들이 화면에 표시되는 순서는 기본적으로는 HTML 문서 내 태그가 쓰여진 순서좌에서 우, 상에서 하float 속성은 요소를 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경선택된 요소가 문서의 흐름에서 제외되어 상위 요소의 왼쪽 도는
27.위치 지정하기<position>
position은 문서 상에 요소를 배치하는 방법을 정의position으로 요소의 배치 방법을 결정하면 top, bottom, right, left를 통해 최종 위치를 결정position: 배치 방법;top: 윗 면에서부터 거리;right: 오른쪽 면에서부터 거리;bo
28.겹치거나 넘치는 요소 다루기 <z-index, overflow>
요소의 쌓임 순서를 정의정수 값을 지정하여 쌓임 맥락에서의 레벨을 정의 position 속성이 정의되어 있는 요소에게 사용first(red) > second(orange) > third(yellow) > fourth(green) 순으로 위로 겹쳐짐예시 코드 실행 결과요
29.선택자 더 알아보기
1️⃣ 속성 선택자 : 특성 속성을 명시하여 요소 선택속성명🔎 속성 선택자 기호와 사용하기\*: 값의 포함 여부^: 값의 시작 여부$: 값의 끝 여부width 속성 중 값에 0이 포함된 요소만 선택2️⃣ 하위 요소 선택자 : 상위 요소에 포함된 하위 요소 선택'공백'
30.의사요소와 의사클래스
의사클래스(가상클래스)는 선택자에 추가하는 키워드요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미hover : 마우스 포인터가 요소에 올라감active : 사용자가 요소를 활성화함 (클릭 등)focus : 요소가 포커스를 받고 있음disabled : 비활성
31.변형과 전환
transform 속성을 이용해 웹 요소에 변형을 적용변형이란 요소의 크기나 위치를 바꾸는 것 (x축과 y축 기준)1️⃣ translate(x,y) : 지정한 크기만큼 x축, y축 방향으로 이동px 단위로 사용2️⃣ scale(x,y) : 지정한 크기만큼 x축, y축으
32.애니메이션 효과
CSS는 웹페이지 상에 표시되는 콘텐츠가 TV 애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframe 모듈과 animation 속성을 지원애니메이션을 표현하는 여러 개의 프레임은 @keyframe 모듈을 이용해 정의백분율을 이용해 프레임을 나누거나, 별도의
33.상속과 공용키워드
상속(inheritance)이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미상속이 이루어지는 속성도 있고 그렇지 않은 속성도 있음스타일 속성의 상속 여부를 제어할 수 있는 키워드를 별도로 지원모든 속성에 적용할 수 있는 키워드임으로 '공용 키워드' 또는
34.미디어 쿼리
미디어 쿼리(media query)는 미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 모듈(기능)구성 요소" @media 미디어타입 and 조건{스타일 선언} "스크린의 최소 너비가 800px이면(800px 이상이 되면) bo
35.모듈화 디자인
웹 개발(프로그래밍)에 있어 컴포넌트(component)란 독립적이고 재사용이 가능한 모듈컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있어 효율이 좋아짐반응형 컴포넌트를 만들고, 그것들을 조립해 하나의
36.플렉스박스
CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술형제 요소들을 가지런히 정렬할 수 있게 하고 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될 지 결정행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식요소의 매치와 정렬은 플렉스 컨테