김방울

[html] 시맨틱 구조 단순한 코드의 구성이 아닌 의미를 가진 태그 모델로 구성된 구조 컴퓨터가 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가됨. header: 페이지 제일 상단, 로고 혹은 검색창 / nav가 함께 배치되기도 함 nav: 네비게이션 즉 메뉴의 배치 section: 콘텐츠 영역, 중요 본문내용을 감싸는 공간 article: 콘텐츠의 내용이 들어가는 영역, section 태그의 하위 개념, 독립적인 내용이 담기는 태그 aside: 홈페이지 사이드에 위치하는 기타 내용 삽입/ 광고배너, 링크 footer: 웹문서의 제일 하단 영역, 홈페이지 제작정보 및 저작권 adress 같은 태그가 포함 div와 비슷한 성격(블럭 형태)을 갖고 있으나 검색 했을 때 상단에 표시..

[CSS] 배경이미지 & 색상 css에서 background image 불러오기 background-image: url(img0/cat_bg.png); 배경이미지는 부모속성보다 이미지가 작을 경우, 반복되는 성격 background-image: url(image/cat_bg.png),url(image/land_bg.png); /*배경이미지를 반복하여 불러올 때 쉼표로 표현, 앞쪽에 불러온 이미지가 위에 표현*/ 배경이미지 반복 제거 body{ background-image: url(image/web.jpg); background-repeat: no-repeat; /*반복하지 않겠다*/ } 가로, 세로축만 반복 background-repeat: repeat-x; 가로 반복 background-repeat:..

레이아웃의 이해 - 네비게이션 구성 line-height: 가지고 있는 박스의 높이 값이 존재할 때, 박스의 높이 값과 동일하게부여를 해 주면 글자가 상하선상 중심 배치가 됨. line-height: 30px; /*행간 - 줄간격의 높이. 글자가 한줄일 떄! 높이와 동일하게 부여시 글자 중심 배치*/ /*a 자식요소로 존재할 때 글자 스타일 a태그에 직접 부여*/ hover: 반응 선택자(마우스를 올렸을 때) li:hover a{ color: coral; /* 안에 있는 (띄어쓰기 = 후손선택자)*/ } 입력 양식 태그input type="서식의 종류" form 태그 : 하나의 입력 양식을 묶어주기 위해 사용다양한 입력 양식 태그실질적으로 사용자가 입력한 값, 양식이 서버로 보내지기 위한 구역, 단락을구..

레이아웃의 이해 - inline & block 블럭구조: 사각형, 덩어리 블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 형태가 상위 영역의 전체 너비만큼 만들어지는 형태 ex) div, p, h1~6, ul, li, ol, di, dt, table, form, section, figure, footer 인라인구조: 글자, 일직선 인라인 요소는 글자와 같이 옆으로 나열되는 형태 줄 바꿈이 일어나지 않는 요소들 span, a, em, i, stron, b, del, ins, sub, sup, textarea 블럭 구조는 스타일 요소(width, height, padding) 등이 다 적용이 되나 인라인구조는 박스 사이즈에 영향을 주는 요소가 적용 x 구조의 포함관계 블럭 요소에는 일부를 제외..

분할태그와 CSS응용 블럭형식 태그, 위에서 아래로 쌓이는 성격 inline 형식: 글자처럼 옆으로 나열되는 성격 속성값에 대하여 표현을 할 때 1.픽셀 2. 백분율 -> 부모 박스 기준으로 퍼센테이지 표현. 반응형 웹 디자인을 할 때 많이 표현된다. .box1{ width: 300px; height: 100px; background-color: coral; } .box2{ width: 50%; /* 박스의 창 넓이를 50% 유지*/ > 박스 사이즈에 영향을 주는 속성들, 계산 시 /*width: 200 + (border: 10+10)+(p: 30+30)_(m:30+30)= 340*/ /*height: 150+(b:10+10)+(p:30+30)+(m:30+30)=290*/ border와 padding은 ..

CSS의 이해 css: html문서에 디자인 요소를 담당하는 부분 = 디자인 및 배치의 역할 css 기술방식 -내부 css- 01. 속성 스타일 (인라인 스타일시트) > body 태그를 포함해서 전체 선택 태그 선택자: h1, p, a html내에 존재하는 특정한 태그를 선택하는 선택자 아이디 선택자: #id, 특정한 이름 표현, 한번 사용가능한 선택자 클래스 선택자: .class 특정한 이름 표현, 여러번 사용가능한 선택자 웹 사이트가 구현이 되는 공간 기본적으로 태그는 자기가 가지고 있는 padding 값과 margin 값이 있음. 그래서 처음 시작할 때 존재하는 모든 선택자들의 패딩과 마진 값을 안 주고 시작해야 한다고 언급을 해야 함. 태그 내에서 주석을 주고 싶을 때는 /* */ 사용 클래스, ..

이미지 태그 이미지, 링크, hover 이미지 태그 www.evernote.com

텍스트 관련 태그 ~ 헤더 텍스트 : 굵고, 사이즈가 지정되어 있음. 단락에 대한 구분이 표현되어져있는 성격 태그 : 단락이 구분되어짐. 글자가 얇음. : 단락에 대한 구분(줄바꿈) h태그와 p태그는 서로 상속될 수 없음 태그: 수평선을 나타내는 태그, 단락을 구분짓는 용도로 사용 이전에는 많이 사용했으나, 요즘은 css때문에 단락을 구분짓는 용도로 많이 사용 border에 비해 입체감이 있음 인용문을 나타내는 태그: - 인용문을 나타내기 때문에 자동으로 들여쓰기가 됨. 마진 값 약 40px 태그: 공백이나 줄 바꿈 결과값을 그대로 보여주는 태그 글자를 꾸며주는 태그 글자를 굵게 - 중요한 것들을 강조 이전에는 태그가 사용되었음. 글자를 꾸며주는 태그는 글자처럼 옆으로 나열되는 성격을 갖고 있기 때문에 ..