다단 레이아웃 - 텍스트를 column 속성으로 다단을 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 - column-count: 단의 갯수를 설정 - column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정 - column-gap: 단과 단사이의 여백을 설정 - column-span: 단과 안의 포함된 요소를 다단편집에서 해제 Flex 레이아웃 - 가로정렬: 테이블, float, flex, grid - css3에 새롭게 추가되었음 - display: flex flex-wrap 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 nowrap:기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 wrap: 플렉스 요소의..
박스 모델(Box Model) - 모든 HTML 요소는 박스모양으로 구성 - 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적이 내용 부분 패딩(padding) 내용과 테두리 사이의 간격 - padding-top, padding-right, padding-bottom, padding-left - padding: 20px(위아래좌우 다 20px) - padding: 20px 20px(위아래20px 좌우 다 20px) - padding: 20px 20px 20px(위20px 좌우20px 아래쪽20px) - padding: 20px 20px 20px 20px(위20px 오른쪽20px 아래20px 왼쪽20px =시계방향) 테두리(bo..
id 선택자 - 웹 문서안의 특정 부분 스타일을 적용. (#)기호를 사용해서 id 속성을 가진 요소에 스타일을 적용 h2 { font-size: 30px;} #hello { color: deeppink;} /* h2#hello { font-size : 30px; color: deeppingk;}*/ 안녕하세요 반갑습니다 class 선택자 특정 집단의 요소를 한번에 스타일을 적용. (.)기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용 .hello {font-size: 20px; color: deeppink;} h2.hello{ font-weight: bold;} 안녕하세요 반갑습니다 하이 또 만났군요 h2, p{text-align: center;} id 선택자 div첫번째 영역 div두번..
CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경 ✔ rel 현재 문서와 링크된 문서 사이의 연관관계를 명시 indent-rainbow(익스텐션) :들여쓰기를 컬러화시킨 익스텐션 선택자 1. 전체 선택자 스타일을 모든 요소에 적용 * { padding: 0; margin: 0; } ✔ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스아틸보다 우선 2. 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용 ✔ 상속 부모 요소의 속성값이 자식 요속에ㅔ게 전달된 과제 본인의 홈페이지에..
FTP(File Transfer Protocol) - 클라이언트-서버(C/S)용 프로토콜 - 클라이언트가 파일을 요청하면 서버가 요청된 파일을 제공 - 클라이언트가 서버로 파일을 전달 - 주로 대량의 파일을 처리할 때 사용 ✔ 호스팅 - 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스 - dothome ✔ 닷홈 호스팅 주의사항 - html 디렉토리에 저장할 파일을 업로드 - 처음에 html 디렉토리에 있는 파일들은 다 지워도 됨 - 웹사이트는 무조건 첫페이지가 있어야함 - 첫 페이지는 항상 index.html(반드시 소문자) 로 업로드해야함 - 파일질라랑 연동가능 ✔ ftp-simple 비주얼 스튜디오 코드에 설치하여 FTP 프로그램으로 사용 F1키 ftp-simple : con..
서식 태그 : 텍스트를 굵게 표현 : 텍스트를 이탤릭체로 표현 : 텍스트를 굵게 표현 : 텍스트를 이탤릭체로 표현, 리더기에서 거쌘 발음 여러분 안녕하세요. 오늘은 HTML에 대해서 배워볼게요 https://validator.w3.org/ 잘못된거 체크해주는 사이트 목록 태그 : 순서가 없는 목록 태그, 블록태그(한줄 다 차지) · 김사과 · 오렌지 · 반하나 김사과 오렌지 반하나 : 순서가 있는 목록 태그, 블록 태그 1. 김사과 2. 오렌지 3. 반하나 김사과 오렌지 반하나 : 정의 목록 태그, 블록태그 류정원 선생님 김사과 학생 오렌지 학생 반하나 학생 류정원 선생님 김사과 학생 오렌지 학생 반하나 학생 이미지 태그 1. 비트맵 이미지 - 픽셀이 모여 만들어진 정보의 집합 - "레스터 이미지"라고 ..
