[카테고리:] HTML/CSS/Javascript

[길벗 학습단] 8장, 9장 자바스크립트 (1)

자바스크립트 코드 작성법 html파일과 자바스크립트 파일 연결하기 외부로 연결하기 주석처리는 한줄짜리는 //, 두줄짜리는 /* 내용 */ 변수와 상수 변수: 값이 변하는 수를 저장하고 관리하는 공간 키워드 : 기능이나 역할이 정해진 단어. 변수를 생성할 때는 var 라는 키워드를 썼지만 요즘엔 let을 쓰는 추세 (var와 달리 식별자 중복x, 호이스팅x)식별자(변수명) : 변수에 이름 붙인 것 (이유: 메모리에 저장한 […]

[길벗 학습단] 7장 효과적인 레이아웃을 위한 CSS 속성

1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 1차원 레이아웃 : 가로나 세로 중 한 방향으로만 레이아웃을 설계하는 방식 1. 플렉스 박스 레이아웃 기본 속성 1. display 속성 모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정그러면 수직으로 정렬된 아이템이 수평으로 정렬됨 2. flex-direction 속성 row : 주축 방향을 왼쪽 -> 오른쪽row-reverse : 오른쪽 -> 왼쪽column […]

[길벗 학습단] 6장 CSS 필수 속성 다루기 (4)

6. 전환 효과 속성 적용하기 css 한 요소에 적용된 속성값을 다른 속성값으로 바뀌게 하는 것 transition-property: 속성값;transition-duration: 지속시간;transition-delay: 지연시간;transition-timing-function: 속성값; /* 전환되는 시간? */ 7. 웹 폰트와 아이콘 폰트 사용하기 1. 구글 폰트 적용하기 구글 폰트 사이트에서 원하는 폰트를 고른 후 important로 시작하는 코드를 css파일 최상단에 넣는다. 그러면 font-family 속성으로 해당 폰트를 넣을 수 있다. […]

[길벗 학습단] 6장 CSS 필수 속성 다루기 (3)

5. 위치 속성으로 HTML 요소 배치하기 1. position html 요소를 좌표값에 따라 배치할 때 static, relative 등 속성값이 있다. static은 기본 흐름에 따라 배치하는 것 1. relative 기준점이 해당 요소의 왼쪽 위 모서리. left: 10px; /* 왼쪽 위 모서리로 부터 왼쪽으로 100px 떨어진 것 */top: 10px; /* 왼쪽 위 모서리로부터 100px 아래 */ 2. absolute […]

[길벗 학습단] 6장 CSS 필수 속성 다루기 (2)

3. 박스 모델을 구성하는 속성 다루기 html 문서의 각각의 요소는 사각형 박스로 둘러싸여있다. 즉 하나의 박스이다. 그 박스를 css로 적절히 배치해 레이아웃을 잡는다 1. margin(외부여백), padding(내부여백) margin 은 인접한 marign값이 좀 더 큰 값으로 통일되는 겹침 현상이 있다. 2. border 테두리. 3. content width, height는 padding, border 사이즈까지 더한 값으로 나타난다. 즉 width를 100px 로 […]

[길벗 학습단] 6장 CSS 필수 속성 다루기 (1)

1. CSS 특징 살펴보기 1. 기본 스타일 시트 브라우저에 내장되어 있는 스타일 시트. 2. 적용 우선순위와 개별성 개별성 규칙에 대한 점수가 있음. 점수가 높은 것이 우선 순위가 높음. 인라인 스타일 > 아이디 선택자 > 가상 클래스 선택자 = 클래스 선택자 > 가상 요소 선택자 = 태그 선택자 > 전체 선택자 개별성 규칙 점수 계산 사이트 […]

[길벗 학습단] 5장 CSS 선택자 다루기

1. 기본 선택자 사용하기 전체 선택자 : * { } 태그 선택자 : h1 { } 아이디 선택자 : html 태그에 있는 id 속성값을 이용한 것. #id { } 클래스 선택자 : html 태그에 있는 class 속성값을 이요한 것. .class { } 기본 속성 선택자 : html 태그에 있는 속성값을 사용한 것. a[href=”_blank”] { }. […]

[길벗 학습단] 4장 웹 스타일링을 위한 CSS 기초 배우기

1. CSS 문법 살펴 보기 1. 문법 형식, 주석 크게 선택자와 선언부로 구분 됨. 선택자는 HTML 태그를 선택하고 선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성함. { } 안에 넣음. 주석은 /* */로 작성 2. CSS 적용하기 1. 내부 스타일 시트 사용하기 html 파일 내부에 css 코드 작성. <style></style>을 <head> 태그 안에 넣으면 됨. 2. 외부 […]

[길벗 학습단] 3장 실무에서 자주 사용하는 HTML 필수 태그 (2)

3장은 HTML에서 자주 사용되는 태그에 대해 설명하고 있고 대략적인 목차는 다음과 같다. 텍스트 작성하기 그룹 짓기 목록 만들기 링크와 이미지 넣기 텍스트 강조하기 폼 만들기 표 만들기 멀티미디어 설정하기 웹 페이지 구조를 설계하는 시맨틱 태그 태그 종류에 상관없이 사용하는 글로벌 속성 정리 6. 폼 구성하기 1. form 태그 폼의 시작을 의미. 일단 폼을 만들려면 <form></form> […]

[길벗 학습단] 3장 실무에서 자주 사용하는 HTML 필수 태그 (1)

3장은 HTML에서 자주 사용되는 태그에 대해 설명하고 있고 대략적인 목차는 다음과 같다. 텍스트 작성하기 그룹 짓기 목록 만들기 링크와 이미지 넣기 텍스트 강조하기 폼 만들기 표 만들기 멀티미디어 설정하기 웹 페이지 구조를 설계하는 시맨틱 태그 태그 종류에 상관없이 사용하는 글로벌 속성 정리 1. 텍스트 작성하기 1. hn 태그 제목을 쓸 때 사용하는 태그이다. h1부터 h6까지 […]