웹 프로그래밍/css (6) 썸네일형 리스트형 selector, state css 에서 html의 element 를 선택하는 방법은 여러가지가 있다. 1. body{ background-color:red; } 2. div input { background-color:blue; } div tag안에 존재하는 모든 input을 선택(div 안의 form 안에 input 이 존재하더라도 선택됨) 3. div > input{ background-color:aqua; } div tag 의 직속 자손의 tag 만을 선택 4. div + p{ background-color:pink; } div tag 바로 밑에 있는 p 태그를 선택 5. input [type='text']{ background-color:teal; } input tag 중 type attribute를 text로 가지고 있는.. position: relative, absolute, fixed, static position 속성은 요소를 배치하는 방법을 지정한다. 1. relative: element가 '처음 생성된 위치'를 기준점으로, top bottom left right으로 위치를 조금씩 수정할 수 있다. 2. absolute: 가장 가까운 relative 부모를 기준으로 이동 3. fixed: element가 처음 생성된 자리에 계속 고정됨 (ex. 메뉴바) 4.static: defalut 값 margin, padding , border 박스(block)에는 3가지 요소가 있다. 1.margin(여백): 박스의 경계 바깥에 위치하는 공간 2.padding: 박스의 경계 안쪽에 위치하는 공간 3.border(경계): margin:5px -> 상하좌우 전부 5px만큼의 공간을 준다는 의미. margin:5px 3px -> 상하: 5px , 좌우: 3px만큼의 공간을 준다는 의미. margin:5px 4px 3px 2px -> 상:5px, 우:4px, 하:3px, 좌:2px만큼의 공간을 준다는 의미.(시계방향) margin-top:5px, margin-left:5px, margin-right:5px, margin-bottom:5px 각각 부여해 줄수 있음. 다음 코드를 보자. 분명 margin 값에 상하좌우 15px씩 주었지만 적용이 안되는 .. 박스 display: (block , inline, inline-block) 아무 사이트나 들어가서 검사(inspect)를 해보면 대부분이 박스들로 이루어진 것을 알 수 있다. 위 그림에서도 Korea Times는 라는 박스 안에 들어가 있다. 박스에는 기본적으로 두가지 종류가 있는데 첫번째는 block이고 두번째는 inline 방식이다. hello hello hello 가장 기본적인 박스인와 을 보자. 다음 예시를 통해 유추할수 있듯이 block 방식의 박스 옆에는 아무것도 올수 없다. 반면에 inline 방식의 박스 옆에는 다른 요소가 올수 있다. 또한 block 방식의 박스는 사이즈가 지정될수 있지만, inline 방식의 박스는 사이즈가 없다. 정리해 보자면 1. block 옆에 다른 요소가 올 수 없음 박스의 크기가 존재함( 크기를 지정해 주어야함) 2. inline (i.. css 작성법 ( id, class ) css 는 기본적으로 h1{ background-color:blue; font-size:20px; } 다음과 같은 방식으로 작성한다. 우선 태그를 지정하고(h1) 그 안에 속성들을 나열해 나가는 방식. 하지만 이러한 방식에는 단점이 있다. 바로 같은 태그를 가진 모든 요소들은 전부 같은 속성을 가지게 된다는 것이다. aa aa aa 위 코드를 실행하게 되면 다음과 같은 화면이 나오게 된다. 그렇다면 저 3개의 블럭에서 가운데 의 색만 파란색으로 만들려면 어떻게 해야 할까? 바로 "id"를 사용하면 된다. id는 다음과 같은 방식으로 사용한다. aa aa aa 우선 안에 id를 지정해주고 #을 붙인 id 값에 속성을 넣어주면 된다. 이와같이 id를 이용하면 원하는 태그 안에 원하는 속성을 지정해 줄 수 있.. html + css (css 를 html에 추가하는 방법) css를 사용하는 방법은 두가지 있다. 1. inline 방식 (style tag를 사용한다.) 다음과 같은 방식으로 작성할 수 있다. (태그는 styles.css 라는 파일을 만들고 html 에서 태그를 이용하여 연결시켜줌. styles.css -> css 파일 이름. stylesheet -> styles.css 와 html의 관계를 나타냄. 이전 1 다음
