림이의 개발일지 림이의 개발일지

HTML5 문서 대부분의 웹 사이트는 디자인은 다르지만 구조는 크게 다르지않다. → 그러므로 표준화 된 시멘틱 태그를 이용해 웹 문서를 작성하면 문조 구조를 보다 쉽고 정확하게 이해 할 수 있다. 문서 구조를 위한 HTML5 시맨틱 태그 Joandora 가장 제주다운 수산리집 이용 안내 객실 소개 예약 방법 예약 하기 요안드라 소개 요안드라는 게스트 하우스 (guest house) Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis impedit, illo similique voluptas culpa dolor consectetur corrupti voluptates dolore odio explicabo consequatur quis..

CSS 포지셔닝과 주요 속성들 CSS 포지셔닝이란 CSS를 웹 문서 요소를 적절히 배치하는 것 box-sizing 속성 박스 모델 너비 값의 기준을 지정함 float 속성 요소를 왼쪽이나 오른쪽에 떠 있게 만듦 예제) float (이미지와 글자 배치) 바쁜 3,4학년을 위한 빠른 분수 3,4학년이 꼭 알아야 할 분수를 한권에 모았어요! 한국 교육과정펵가원이 최근 발표한 보고서에 따르면'수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. 한국 교육과정펵가원이 최근 발표한 보고서에 따르면'수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. 예제) float (박스 한줄에 배치) 박스1 박스2 박스3 박스4 예제) float-left (헤드라인 목록 정리 할때 많이 쓰임) 애완견 종류 입양하..

CSS와 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 ( img,strong 등등) 박스 모델 실제 콘텐츠영역, 패딩, 박스의 데두리, 그리고 마진등의 요소로 구성됨 (웹 페이지에서 f12 누르고 올바르게 스타일 적용한지 확인할수 있음) width, height 속성 실제 콘텐츠 영역의 크기 지정 예제) width, height (퍼센트로 웹 페이지 크기마다 변함) display 속성 display:block - 줄바꿈이 들어가 다른줄을 밀어내고 혼자 한 줄 차지 display:inline - 줄바꿈 없이 한줄에 나란히 배치 display:inli..

웹에서 색상 표현하기 16진수 표기법 #ffffff 처럼 #과 함께 6자리의 16진수로 표시 rgb/rgba 표기법 colorrgb(255,0,0)처럼 세 자리의 숫자로 표시 색상 이름 표기법 잘 알려진 색상 이름으로 표시 배경 색과 배경 이미지 background-color 속성 웹 문서의 요소에 배경색 지정 16진수나 rgb값, rgba 값 또는 색상 이름 사용 background-clip 속성 배경을 어디까지 적용할지 지정 backgroung-image 속성 배경 이미지 파일 경로 지정 backgroung-repeat 속성 배경 이미지 반복 여부 및 반복 방향 지정 background-size 속성 배경 이미지 크기 조절 auto - 원래 배경 이미지 크기 만큼 표시 (border 크기가 작으면 잘..

글꼴 관련 스타일 ont-family 속성 -웹 문서를 사용할 글꼴 지정 - 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 사용 font-size 속성 -글자 크기를 조절하는 속성 값에서 사용하는 단위 em : 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절 ex : 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절 px : 모바일 기기로 볼때도 같은 크기로 화면에 표시 pt : 포인트 font-weight - 글자 굵기를 조절하는 속성 font-variant - 대문자를 소문자 크기에 맞추어 작게 표시 예제) font variant 세계 3대 미항 시드니(Sydney),호주 리우데자네이루 (Rio de janeiro), 브라질 나폴리(Naples),이탈리아 font-style 속성..

스타일과 스타일 시트 -스타일 : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각요소의 배치 방법 등 문서의 겉모습을 결정짓는 내용들 -스타일 시트 : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것 스타일을 사용하는 이유 -웹 문서의 내용과 상관없이 디자인만 바꿀수 있다. -다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있다. 내부 스타일 시트 Mouse Over