02_ul태그메뉴작성 (웹페이지) 02_ul태그메뉴작성 (코드)

박스모델 margin 속성 : border 속성 기준 바깥쪽 영역 속성값 : margin-top(상단여백), margin-right(오른쪽 여백), margin-bottom(하단여백), margin-left(왼쪽 여백) ex) margin: 40px 15px 20px 10px (시계방향기준으로 top right bottom left 순서) border 속성 : 공간의 테두리를 생성 속성값 : solid(실선), dotted(점선) ex) border: solid 10px blue; (타입 선의굵기 선의색상 순서) padding 속성 : border 속성 기준 border 속성과 content 속성의 간격 속성값 : padding -top(상단여백), padding -right(오른쪽 여백), paddin..

weight와 height 속성 weight : 너비 height : 높이 font- 속성 font-size : 글자 크기 지정. px 단위를 가장 많이 사용 font-family : 글꼴을 지정 font-style : 글자 모양을 지정 속성값 : normal(기본글꼴). italic(이탤릭체), oblique(비스듬히) font-weight : 글자 굵기를 지정. 속성값 : normal(보통 두께), bold(굵게), bolder(bold보다 굵게), lighter(normal보다 얇게), 100~900(100단위. 글자가 클수록 굵어지며 400은 normal, 700은 bold) background 속성 background-color : 배경색 지정 background-image : 선택된 영역에 배..

01_태그 (웹페이지) 01_태그 (코드)

CSS의 뜻과 구성요소 CSS : Cascading Style Sheet의 약자로 디자인 영역을 담당하는 언어. CSS3이 등장하며 텍스트 그림자, 그라데이션, 등 디자인으로 표현할 수 있는 영역이 늘어남. 또한 애니메이션 기능이 추가되어 일정범위내에서 제이쿼리와 자바스크립트를 대체함. CSS의 구성요소 : HTML 영역, 속성, 속성값 ex) 디자인을 적용할 HTML영역 { 속성: 속성값; } ex) 이미지 { 너비: 30px; 높이: 50px; 컬러: black; } CSS 연동 방법 인터널 방식 : HTML 문서 안에 태그를 사용하여 CSS 적용하는 방식 인라인 방식 : HTML 태그 안에 style 속성을 사용하여 적용하는 방식 익스터널 방식 : CSS 파일을 생성하여 HTML 문서와 연동하는 방..

웹사이트의 공간 상단 : 중앙 : , 하단 : 작은 구역 : 웹 사이트의 공간을 정의하는 태그 태그 : 웹 사이트의 머리글. 로고, 메뉴, 회원가입, 검색창 등을 표시할 때 사용. 태그 안에는 ~ 태그를 이용하여 회사 이름이나 슬로건을 작성. 태그 : 메뉴 버튼을 담는 공간. 태그 안에는 버튼을 만들 때 사용하는 , , 태그를 입력할 수 있음. 태그 : 웹 사이트 영역을 설정할 때 사용. (ex)책에서의 각 챕터의 내용을 담은 영역). 태그 안에는 반드시 ~태그 중 하나는 있어야 한다. 태그 : 웹 사이트의 본문 내용 전체를 감쌀 때 사용. 따라서 HTML 문서 한 개당 한 번만 사용 가능. 홈페이지의 주요 컨트롤러(상품소개, 최근 best상품 등)를 입력함. 태그 : 웹 사이트 하단에 들어가는 정보를 ..

HTML 태그의 구성요소 HTML 태그 : 열린태그와 닫힌태그, 속성, 속성값으로 구분. 콘텐츠 태그 : 입력된 정보의 성격 속성 : 태그가 가진 역할 속성값 : 태그가 어떤 역할을 수행할지 구체적인 명령을 내리는 역할 콘텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물. 웹사이트의 텍스트 정보를 입력하거나 다른 HTML태그를 삽입. HTML 문서의 기본구조 HTML 주요 태그 태그 : a태그의 콘텐츠를 클릭하면 특정 영역이나 특정 페이지로 이동. -href 속성 : hypertext referrence의 약자로 연결할 주소를 저장할 때 사용. 텍스트를 선택하여 웹사이트로 이동하려면 a태그의 href속성의 속성값으로 URL주소를 입력하면된다. (URL주소가 정해지지 않았다면 #기호를 기본값으로 입력. ..

HTML, CSS, 자바스크립트 HTML : HyperText Markup Language(하이퍼 텍스트 마크업 언어)의 약자. 웹사이이트를 만들기 위해 사용하는 프로그래밍 언어 중 하나. 설계 작업. 웹사이트에 접속 시 눈에 보이는 정보(텍스트,이미지) 등을 HTML로 입력 CSS : 디자인 작업. 공간과 정보에 디자인을 입히는 역할(공간 크기 설정, 글자 색 변경 등) 자바스크립트 : 기능 작업. (이미지 슬라이드 효과, 팝업 알림 등) 웹 사이트 레이아웃의 종류 정적 레이아웃 : 공간의 크기가 변하지 않는 고정 레이아웃. 데스크톱 화면보다 크게 제작된 웹사이트를 접속하면 콘텐츠가 잘린 상태로 출력되면서 스크롤이 발생. 스마트폰, 태블릿 등에서는 웹사이트 크기가 각 기기화면에 맞게 작게 출력되지만, ..