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

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

폼 만들기 폼의 정의 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼 (form) 폼의 기본 태그들 - 폼을 만드는 기본 태그 - 폼 요소에 레이블(텍스트)을 붙이는 태그 - 폼 요소를 그룹으로 묶는 태그 - 그룹으로 묶는 구역에 제목을 붙이는 태그 개인 정보 이름 메일주소 로그인 정보 아이디 비밀번호 - 사용자가 입력하는 부분은 거의 태그를 이용해 처리 type 속성 값에 따라 함께 사용할 수 있는 속성들도 달라진다. input type type = “hidden” - 화면상의 폼에는 보이지 않는다. type = “text” - 주로 아이디나 이름, 주소 등 텍스트 입력 type = “password” - 비밀번호 입력란 type = “search” - 검색 필드 type = “url” -..

이미지 태그 웹 문서에 이미지를 삽입 할때 사용 태그의 속성 -src 속성 - 이미지 파일 경로 -alt 속성 - 이미지를 설명하는 대체 텍스트 -width,height 속성 - 이미지 크기 조정하기 img (크기 조절) 이미지 크기 조절 이미지에 설명글 붙이기 : 설명글을 붙일 대상 지정 : 이미지를 설명하는 대체 텍스트 예제) figure figcption 제품 선택 에멘 모카 마타리(Yemen Mocha Mattari) 링크 만들기 -하이퍼링크 : 다른 문서 , 혹은 다른사이트로 바로 연결해 주는 기능 텍스트 예제) link(텍스트링크, 이미지 링크) 텍스트 링크만들기 네이버 홈페이지 이미지 링크만들기 taget 속성 - 새 탭에서 링크 열기 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 ..

텍스트를 묶어주는 태그 - 제목 표시 - 텍스트 단락 - 줄 바꾸기 - 분위기 전환 - 인용문 넣기 (다른 텍스트보다 안으로 들여 써짐) - 입력한 그대로 표시 (띄워쓰기 하면 그대로 표시된다) - 기본태그 사용 제주 이색 여행지 - 이중섭 거리 주말 마다'서귀포문화예술디자인시장'이 열립니다. '아트마켓'이라고도 부르는데, 문화예술체험이나 공연관람을 할 수도 있고 작가들이 직접 만든 창작예술품 등을 판매하기도 합니다. 텍스트를 한 줄로 표시하는 태그 - 중요한 내용 강조할때 - 단순히 굵게 표시할때 ,-이텔릭체로 표시하기 줄바꿈 없이 다른 내용과 한줄에 인용 내용 표시 형광펜 효과 (배경색이 노랑으로 표시됨) , - 영역 묶기 - 줄 안에서 (인라인) 묶기 - 글자에 주석 표시 ( 태그 안에 태그를 사용..

HTML과의 첫 만남 HTML이란 무엇일까? 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML Hyper Text Hyper의 뜻은 뛰어넘다 초월하다의 의미를 가지고 있다. 즉 Hyper Text는 페이지마다 자유롭게 이동하는걸 뜻한다. mark up 제목이 어디서부터 어디까지인지, 본문은 어디부터 이까지 인지, 내용은 어떤 것인지 단락이 구분 되어 있습니다. 이 모든것은 마크업 언어를 통해 구조적으로 표현이 가능합니다. 즉, HTML 문서를 구조적으로 표현하기 위한것이 마크업 개념입니다. 브라우저의 구성요소는 모든게 content입니다. 브라우저는 컴퓨터가 마찬가지로 인간의 언어를 이해할수 없기 때문에 모든것을 알려 줘야 한다. 즉 브라우저에게 우리가 사용할 content 를 알려 주어야..