일상의 변화를 기록

width는 길이를 조절하는 속성이다. 여기서는 min-width와 max-width에 대해서 알아보자 min-width : 최소 길이를 설정하는 속성(설정 길이보다 짧아지지 않는다.) max-width : 최대 길이를 설정하는 속성(설정 길이보다 길어지지 않는다.) 요소의 넓이 조정 div{ border: 3px solid skyblue; text-align: center; margin-top: 5px; } .ex1{ min-width: 500px; } .ex2{ max-width: 500px; } min-width: 500px max-width: 500px 500px 이상 늘어나지 않는 max-width를 볼수 있다. 500px 이하로 줄어들지 않는 min-width를 볼 수 있다.

링크의 상태 1.) link : 방문하기 전 상태 2.) hover : 링크에 마우스의 포인터를 올렸을 때 3.) active : 링크를 마우스로 클릭한 순간 4.) visited : 방문한 후 상태 링크는 이렇게 4가지 상태를 갖고 있는데 CSS를 통해 링크 상태를 제어할 수 있다. 링크 a:link{ text-decoration: none; } a:visited{ text-decoration: none; color: orange; } a:hover{ color: skyblue; text-decoration: underline; } a:active{ text-decoration: none; color: green; } CSSTUTORIALS text-decoration은 링크가 걸린 텍스트의 모양을 바..

HTML의 display는 크게 2가지 속성으로 이루어져 있다. 하나는 inline이고 다른 하나는 block형태이다. display는 요소를 어떻게 표시할지 정하는데 inline은 한줄에 계속 추가되는 것을 말한다. 반면에 block은 한줄에 추가되는것이 그 다음줄에 추가되는 형태를 말한다. 예를 들자면 border: 3px solid blue; 의 형태는 이렇게 하나씩 쌓이는 block형식이지만 float를 이용해서 한줄에 하나씩 추가되는 inline형태로 바꿀수도 있다. float: left;를 이용하면 한줄에 왼쪽부터 하나씩 추가되는 inline형식으로 표현된다 한줄에 추가된 모습이다.

웹 페이지에 배경을 설정하는 방법을 알아보자 위와 같은 코드를 실행시키면 각 태그의 영역에 지정한 배경색이 칠해지게 된다. 화면 전체에 배경을 설정하고 싶으면 body부분에 설정해야 함을 알 수 있다. 특정 이미지를 배경으로 설정한 것이다 background-repaet 은 이미지가 화면보다 작을시 반복시킬지 정하는 것이다. background-repaet: repaet | no-repeat | repeat-x | repeat-y 등이 있다 repeat : 전체 반복 no-repeat : 반복하지 않는다 repeat-x: x축만 반복한다 repeat-y: y축만 반복한다. background-position: center; 는 이미지를 배치할 위치를 정할 수 있다. center | left | right..

border : 태그의 테두리를 설정하는 속성이다 일반적으로 사용하는 방법은 border: width style color순으로 사용하는데 이렇게 사용한다. 하지만 이렇게 전부 각각 설정이 가능하며 하나의 border은 top, bottom, left, right로 나누어지며 각각 스타일 굵기 색등 세세하게 설정이 가능하다 꽤나 다양하게 설정이 가능하다. * border-collapse 위와같은 테이블에서 th와 td에 border을 주면 두줄로 표시된다 border-collapse: collapse; 옵션을 사용하면 두 줄을 한 줄로 표현 할 수 있다. border-collapse가 적용된 모습이다. border-collapse는 표와 테두리와 셍ㄹ의 테두리 사이의 간격을 어떻게 처리할지 정한다. bo..

Selector(선택자) CSS는 HTML요소의 style을 정의한다. 여러 방법중에 style 태그에 모아서 사용할때 style을 적용하고자하는 HTML요소를 특정할 방법이 필요한데 이 역할을 Selector가 한다. => Selector는 style을 적용할 HTML요소를 특정하는 역할. Selector에도 여러 종류가 있다 1. 전체 Selector- HTML 문서 내의 모든 요소를 선택 사용법 : *{내용} 전체 Selector에 의해 3개의 p태그 내용이 파란색으로 변한것을 확인할 수 있다. 2. 태그 Selector-지정된 태그를 요소로 선택한다. 사용법 태그명{내용} p태그 전체를 빨간색으로 div태그 전체를 파란색으로 만들게 된다. 실행결과 3. ID Selector-태그에 id를 부여해서..

Cascading Style Sheets(CSS) HTML - 웹 사이트에서 화면에 표시되는 정보를 약속한것. CSS - 초기의 웹은 HTML 하나로 문서의 뼈대를 만들고 꾸미기도 했지만 공통적인 디자인을 갖는 문서거 여러개 존재할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야하는 번거로움 발생, CSS는 이런 문제를 해결하고 웹페이지의 내용과 스타일을 분리해주고 HTML을 보다 세련되게 표현할 수 있게 해줌. CSS의 사용법 1. HTML의 style 속성을 이용, 해당 태그에 직접 설정 글자의 색이 변경된 것을 확인할 수 있다. 2. style 태그를 이용해서 HTML 문서 안에 작성하는 방법 이렇게 head태그 안에 style 태그를 추가하여 사용하는 방법이 있다. 3. Css 파일을 외부에서..