1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 1차원 레이아웃 : 가로나 세로 중 한 방향으로만 레이아웃을 설계하는 방식 1. 플렉스 박스 레이아웃 기본 속성 1. display 속성 모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정그러면 수직으로 정렬된 아이템이 수평으로 정렬됨 2. flex-direction 속성 row : 주축 방향을 왼쪽 -> 오른쪽row-reverse : 오른쪽 -> 왼쪽column […]
6. 전환 효과 속성 적용하기 css 한 요소에 적용된 속성값을 다른 속성값으로 바뀌게 하는 것 transition-property: 속성값;transition-duration: 지속시간;transition-delay: 지연시간;transition-timing-function: 속성값; /* 전환되는 시간? */ 7. 웹 폰트와 아이콘 폰트 사용하기 1. 구글 폰트 적용하기 구글 폰트 사이트에서 원하는 폰트를 고른 후 important로 시작하는 코드를 css파일 최상단에 넣는다. 그러면 font-family 속성으로 해당 폰트를 넣을 수 있다. […]
5. 위치 속성으로 HTML 요소 배치하기 1. position html 요소를 좌표값에 따라 배치할 때 static, relative 등 속성값이 있다. static은 기본 흐름에 따라 배치하는 것 1. relative 기준점이 해당 요소의 왼쪽 위 모서리. left: 10px; /* 왼쪽 위 모서리로 부터 왼쪽으로 100px 떨어진 것 */top: 10px; /* 왼쪽 위 모서리로부터 100px 아래 */ 2. absolute […]
3. 박스 모델을 구성하는 속성 다루기 html 문서의 각각의 요소는 사각형 박스로 둘러싸여있다. 즉 하나의 박스이다. 그 박스를 css로 적절히 배치해 레이아웃을 잡는다 1. margin(외부여백), padding(내부여백) margin 은 인접한 marign값이 좀 더 큰 값으로 통일되는 겹침 현상이 있다. 2. border 테두리. 3. content width, height는 padding, border 사이즈까지 더한 값으로 나타난다. 즉 width를 100px 로 […]
1. CSS 특징 살펴보기 1. 기본 스타일 시트 브라우저에 내장되어 있는 스타일 시트. 2. 적용 우선순위와 개별성 개별성 규칙에 대한 점수가 있음. 점수가 높은 것이 우선 순위가 높음. 인라인 스타일 > 아이디 선택자 > 가상 클래스 선택자 = 클래스 선택자 > 가상 요소 선택자 = 태그 선택자 > 전체 선택자 개별성 규칙 점수 계산 사이트 […]
1. 기본 선택자 사용하기 전체 선택자 : * { } 태그 선택자 : h1 { } 아이디 선택자 : html 태그에 있는 id 속성값을 이용한 것. #id { } 클래스 선택자 : html 태그에 있는 class 속성값을 이요한 것. .class { } 기본 속성 선택자 : html 태그에 있는 속성값을 사용한 것. a[href=”_blank”] { }. […]
1. CSS 문법 살펴 보기 1. 문법 형식, 주석 크게 선택자와 선언부로 구분 됨. 선택자는 HTML 태그를 선택하고 선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성함. { } 안에 넣음. 주석은 /* */로 작성 2. CSS 적용하기 1. 내부 스타일 시트 사용하기 html 파일 내부에 css 코드 작성. <style></style>을 <head> 태그 안에 넣으면 됨. 2. 외부 […]
3장은 HTML에서 자주 사용되는 태그에 대해 설명하고 있고 대략적인 목차는 다음과 같다. 텍스트 작성하기 그룹 짓기 목록 만들기 링크와 이미지 넣기 텍스트 강조하기 폼 만들기 표 만들기 멀티미디어 설정하기 웹 페이지 구조를 설계하는 시맨틱 태그 태그 종류에 상관없이 사용하는 글로벌 속성 정리 6. 폼 구성하기 1. form 태그 폼의 시작을 의미. 일단 폼을 만들려면 <form></form> […]
3장은 HTML에서 자주 사용되는 태그에 대해 설명하고 있고 대략적인 목차는 다음과 같다. 텍스트 작성하기 그룹 짓기 목록 만들기 링크와 이미지 넣기 텍스트 강조하기 폼 만들기 표 만들기 멀티미디어 설정하기 웹 페이지 구조를 설계하는 시맨틱 태그 태그 종류에 상관없이 사용하는 글로벌 속성 정리 1. 텍스트 작성하기 1. hn 태그 제목을 쓸 때 사용하는 태그이다. h1부터 h6까지 […]
길벗출판사의 <html+css+자바스크립트> 학습단에 선정되어서 14일 간 공부를 한 것을 정리할 예정. VS CODE(+확장 프로그램), 크롬 설치 HTML기본 내용 HTML 기본 구성 요소: 태그, 속성, 문법, 주석 태그 : 형태 속성 : 태그에 의미, 기능 보충. 문법 콘텐츠가 있는 문법 콘텐츠, 등 주석 : 브라우저에 표시 안되는 것. 메모나 설명 등. 구조 DTD : 문서형 정의 […]