5장_CSS 기초 //CSS 기초 //6장_텍스트 관련 스타일 //텍스트 관련 스타일 //7장_색상과 배경을 위한 스타일 //색상과 배경을 위한 스타일 //8장_CSS 박스 모델 //CSS 박스 모델 //9장_CSS 레이아웃 //CSS 레이아웃 //10장_HTML5와 시맨틱 태그 //HTML5와 시맨틱 태그 //실습문제 모음 //
6 - 1더보기 최신 웹 디자인 트렌드 반응형 웹 디자인 - 다양한 화면 크기에 최적화하다 플랫 디자인 - 입체에서 평면으로 풀스크린 배경 - 콘텐츠에 집중 원 페이지 사이트 - 한 페이지에 모든 내용을 담다 패럴랙스 스크롤링 - 동적인 효과로 강한 인상을! 웹 폰트 - 웹 타이포그래피를 받쳐주는 기술 6 - 2더보기 최신 웹 디자인 트렌드 반응형 웹 디자인 - 다양한 화면 크기에 최적화하다 플랫 디자인 - 입체에서 평면으로 풀스크린 배경 - 콘텐츠에 집중 원 페이지 사이트 - 한 페이지에 모든 내용을 담다 패럴랙스 스크롤링 - 동적인 효..
HTML5와 시맨틱 태그 1. HTML5 문서 웹 문서의 레이아웃을 어느 정도 표준화 할 수 있겠다고 생각하고, 레이아웃을 만들 때 사용하는 주요 태그를 미리 약속해 놓고 해당 태그만 보면 어느 부분이 헤더이고 어느 부분이 실제 내용인지 쉽게 알 수 있도록 했다. 표준화된 시맨틱 태그를 이용해 웹 문서를 작성하면 어떤 기기에서도 문서 구조를 정확히 이해할 수 있다. 더보기 Joandora 가장 제주다운 수산리집 이용 안내 객실 소개 예약 방법 예약 하기 요안도라 소개 요안도라는 게스트 하우스(Guest House) 형식 의 농어촌 민박입니다. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad animi ipsam amet earum labore ..
CSS 레이아웃 1. CSS 포지셔닝과 주요 속성들 box-sizing 속성 더보기 box-sizing = "content-box" box-sizing = "border-box" float 속성 요소를 왼쪽이나 오른쪽에 떠 있게 만듦 더보기 바쁜 3,4학년을 위한 빠른 분수 3,4학년이 꼭 알아야 할 분수를 한 권에 모았어요! 한국 교육과정평가원이 최근 발표한 보고서에 따르면 '수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. 한국 교육과정평가원이 최근 발표한 보고서에 따르면 '수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. 박스1 박스2 박스3 박스4 clear 속성 float 속성을 무효화 시키는 속성 더보기 박스1 박스2 박스3 박스4 position 속성 웹 문서 안에 요소..
CSS 박스 모델 1. CSS 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 요소의 너비가 100% , 등 더보기 시간이란... 내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라. 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 , 등 박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 개발자 도구 창에서 박스 모델 확인 가능 width, height 속성 실제 콘텐츠 영역의 크기 지정 더보기 2. CSS 박스 모델(display 속성) display : block display 속성이 block으로 지..
색상과 배경을 위한 스타일 1. 웹에서 색상 표현하기 16진수 표기법 #ffffff 처럼 #과 함께 6자리의 16진수로 표시 앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양. 하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시 000000(검은색) 〜 ffffff(흰색) 두자리씩 중복될 경우 줄여 사용할 수 있음. 예) #ffff00 → #ff0 #cccccc → #ccc hsl/hsla 표기법 color : hsl(240, 100%, 50%) 처럼 세 자리의 숫자로 표시. 앞의 숫자부터 색상(hue), 채도(saturation), 밝기(light)의 양. 투명도를 조절할 때는 hsla(240,100%,50%,0.3)처럼 마지막에 알파값 추가 알파값은 불투명도를 나타내는 값으로 0니 값 중..