공부하고 또 공부하는

[개요] border 속성은 태그의 테두리를 설정하는 속성으로, background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. width-style-color 의 순서로 사용합니다. border-width 테두리의 두꼐로, 주로 px단위를 사용합니다. border-style 테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다. border-color 테두리의 색상으로, 값은 color 속성의 포맷을 사용합니다. [예시] [결과] [방향] 테두리의 특정 방향만 따로 설정할 수도 있습니다. border-top border-bottom border-left border-right border-bottom-color 처럼 방향과 색, 두께, 스타일을 따로 설정할 수도 있습니다...

[개요] background 속성은 태그의 배경을 지정하는 속성으로, font 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성입니다. 아래의 세부적인 속성을 가집니다. background-color 배경 색 background-image 배경 이미지 background-repeat 배경 이미지 반복 여부 background-position 배경 이미지 위치 [background-color] 배경색을 의미하며, 값은 color 속성의 포맷을 사용합니다. ※ 태그의 크기가 없을 경우 배경색을 표기되지 않습니다. [예시] [결과] [background-image] 배경 이미지를 설정하며, 주로 이미지 경로를 지정하는 방식으로 사용합니다. 경로는 background-image:url("이미지 경로")..

[개요] visibility 속성은 태그의 가시성을 결정합니다. 아래의 4가지 값을 가지며, 기본 값은 inherit 입니다. visible : 보임 hidden : 숨김(자신의 영역은 계속 차지) collapse : 겹치도록 지정)테이블의 행과 형 요소만 지정할 수 있으며, 그 외 요소를 지정하면 hidden으로 해석) inherit : 부모 요소의 값을 상속 [사용법] #box1 { visibility: hidden; } [예시] [결과]

[개요] border-radius 속성은 요소의 테두리를 둥글게 만들어 줍니다. px 단위와 % 단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있습니다. 총 4개의 모설리를 각각 다른 값으로도 줄 수 있습니다. margin 및 padding 속성 처럼 4개의 값을 띄워쓰면 왼쪽-위-부터 시계 방행으로 각자 다른 값을 지정할 수 있습니다. [사용법] #box{ border-radius: 5px; border-radius: 1px 2px 3px 4px; } [예시] [결과]

[개요] text-align 속성은 텍스트의 정렬 방향을 의미합니다. left : 왼쪽 정렬 light : 오른쪽 정렬 center : 중앙 정렬 justly : 양쪽 정렬(자동 줄바꿈시 오른쪽 경계선 부분 정리) [사용법] #box1 { text-align: right; } #box2 { text-align: left; } #box3 { text-align: center; } [예시] [결과]

[개요] font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다. 정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font 라는 하나의 속성에 한번에 쓸수 있다는 소리입니다. 세부적인 글꼴 관련 속성은 아래와 같습니다. font-style 이탤릭체 등의 글꼴의 스타일 지정 font-weight 글자 두께 font-variant 글꼴 변형(소문자를 대문자로 바꾸는 동의) font-size 글자 크기 line-height 줄 간격 font-family 글꼴(굴림, 돋움...) font 속성은 다음과 같은 순서로 세부 속성을 한번에 기술합니다. font: font-style font-variant font-weight font-size/line-height font..

[개요] color 속성은 단어 뜻대로 색상, 정확히는 글자의 색상을 의미합니다. red, blue 등 이미 정의된 색 #000, #FFFFFF 등의 16진수 색상 코드 rgb(255,255,255) 등의 RGB색상 rgba(200,100,150,0.5)등의 알파(투명도)가 적용된 RGBA 색상 [사용법] #text1 { color: red; } #text2 { color: #0A0; } #text3 { color: rgb(0, 0, 150); } #text4 { color: rgba(30, 150, 100, 0.5); } [HTML 예시] [결과]

[개요] CSS에서 width와 height를 계산하는 방법은 꽤 독특합니다. width:200px 이고 height:100px, padding:20px, border:5px solid black 인 요소는 화면상에 어떻게 나타날까요? 아래 사진 중에 왼쪽처럼 계산 될까요? 아니면 오른쪽처럼 계산될까요? [content-box] 결론부터 이야기하자면 기본적으로 오른쪽처럼 그려지게 됩니다. width를 200px로 설정했다고 할지라도 전체 너비가 200px이 되는 것이 아닌, 여기에 padding과 border-width가 더해져서 그려지게 됩니다. 이는 계산 방법을 content-box라고 하며, box-sizing 속성을 content-box로 주게 되면 이와 같이 계산하게 됩니다. 기본적으로 CSS에..

[개요] width 와 height 속성은 각각 가로 길이, 세로 길이를 의미합니다. 값을 정의할 때는 "100px" 처럼 숫자 뒤에 단위를 표시하여 적습니다. (px는 픽셀이라는 의미이며, '50%'처럼 '%' 단위를 사용할 수도 있음.) [사용법] #box{ width: 100px; height: 60px } [예시] 150x80 90x120 [결과]

[개요] 선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있으며, 이를 가상(추상) 클래스라 합니다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때(input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(2n+1) - 홀수 번째 자식 위는 대표적인 가상 클랙스의 예시이며, 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면, HTML, CSS 및 Javascript의 코드를 효과적으로 줄일 수 있습니다. [사용..