tp134679 님의 블로그

1. float 의 배경과 특징  2. float 의 문제점  오늘은 CSS에 있는 Float를 배우고 활용하였다.   1.float 의 속성과 특징 float의 속성과 특징은 넓이와 높이를 설정가능한 블록상태를 가지는 속성이며 life, right를 이용하여 영역의 좌우 영역에 표현이 가능합니다.float 말그대로 띄다 라는 표현을 가지고 있는데 float 속성을 사용하면 해당 이미지와 같이 띄어진 형태를 띄어서 사용자에게 보여지게 된다.  해당이미지처럼 123에 float 속성을주고 4번 은 좀더 큰 박스를 만들고 결과값을 확인해보면 오른쪽 이미지처럼 1,2,3 번 박스 밑에 4번 박스가 위치 하는것을 알 수 있다.또한 최소한의 너비와 높이 값을 유지하려고 하는 인라인형태와 달리 float를 사용하면..

1. CSS padding,magin의 구분과 활용법2. padding과 magin을 사용하여 컨텐츠를 꾸미고 알아보기  전시간에 배운 padding과 magin을 보강하면서 복습하는 시간을 가졌다.  1. CSS padding,magin의 구분과 활용  1. padding 패딩을 사용하여 밀어낸 영역은 병합현상이 일어나지 않으며, 콘텐츠의 연장선으로서 패딩을 사용하여 넓어진 영역 또한 색이 입히고  추가속성 또한 모두 상호작용이 가능하다.해당 HTML CSS코드를 사용하여 알아보도록 하자  해당 블록형태의 box1과 box2 가 붙어있는 것 처럼 보이지만 box1과 box2의 콘텐츠의 연장선인 padding영역이 box1,box2각각 상하 20px 넓어져서 aqua색의 속성 또한 넓어졌고 병합현상이 일..

1. margin과 padding2. margin과 padding을 활용한 원하는 공간 디자인    1.margin과 padding  기본적으로 HTML은 4가지의 영역으로 구성된다고 볼 수 있다. 바깥쪽부터 margin,border,padding,content 4가지의 영역으로 나뉘게 되는데 margin과 padding은 구역을 나눈다는 역할은 비슷해보이나 각자 다른 사용도를 보인다.margin과padding 둘다 4면을 가지고 영역을 활용하기 때문에  상하좌우로 나누어 명령어를 내릴 수 있다.padding을 예로 들자면 padding: 20px 명령어를 활용하면 4가지 면(상하좌우) 모두에 20px만큼의 공간을 벌리나 아레의 명령어처럼 구역을 나눠서 명령어를 넣는것도 가능하다.  1.2 margin과..

1. CSS의 선택자 2. 선택자를 활용하여 원하는 블럭에 적용하기  1. CSS의 선택자 종류와 활용CSS는 스타일 시트로써 원하는 라인과 위치에 스타일을 적용시킬만한 선택자를 사용하는데 배운 선택자를 살펴보자면1. class 선택자class사용한 값 을 선택하여 속성과 속성값을 적용함 { (.) 을 이용하여2. id 선택자id를사용한 값 을 선택하여 속성과 속성값을 적용함{ (#) 을 이용하여 id를 사용함}3.태그 선택자명령어를 직접 태그하여 속성값을 적용함 (웬만하면 태그 선택자는 자제하는게 좋다 >>선택한 태그에 모든 속성값이 부여되기 때문에 혼선을 만듬) 4. 그룹 선택자공용속성 (class,id등)를 이용한 한 그룹을 묶어서 속성값을 적용함 5. 직계 자식 선택자선택한 요소의 직계 "모든"자..