공부하고 또 공부하는

[개요] 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에..

[개요] margin 과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. margin 과 padding 은 border 를 경계로 나뉩니다. [방향] 방향마다 여백을 다르게 설정할 수 있습니다. margin:10px - 상하좌우 모두 20px을 의미합니다. margin:10px 20px - 상하 10px, 좌우 20px을 의미합니다. margin:10px 20px 30px - 위 10px, 좌우 20px, 아래 30px을 의미합니다. margin:10px 20px 30px 40px - 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px 을 의미합니다. 즉, 방향의 위부터 시계방향으로 회전하여 위 ..

[개요] 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의 코드를 효과적으로 줄일 수 있습니다. [사용..

[개요] CSS 선택자에서도 AND 나 OR 과 같은 선택자를 비슷하게 사용할 수 있습니다. 태그이름#아이디 { 속성1:속성값; 속성2:속성값; } 태그이름.클래스명 { 속성1:속성값; 속성2:속성값; } .클래스명#아이디 { 속성1:속성값; 속성2:속성값; } 선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그에 스타일을 적용할 수 있습니다.(AND 연산) #아이디, .클래스명{ 속성1:속성값; 속성2:속성값; } 태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; } 쉼표(,)를 통해 두 선택자 중 하나라도 만족시 적용되는 조건을 만들 수도 있습니다.(OR 연산) [사용법] div#m_box{ width:500px; height:150px; } div.box{ backgroun..

[개요] 태그 이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용 시킵니다. 선택자1 선택자2 { 속성1:속성값; 속성2:속성값; } div span{...} 처럼 태그 이름 뿐만 아니라 #main_content .box{...} 처럼 아이디와 클랙스를 사용할 수도 있습니다. [사용법] div span{ text-align:center; padding:10px; } div.yellow_box span { background-color:yellow; } div#c_box span { text-align:center; padding:10px; } div span .blue_span {background-color:blue; } div span #c_span { text-align:..

[개요] 태그에서 설정한 id나 class 속성에 따라 스타일을 지정합니다. id에 줄 경우 아래처럼 #을 맨 앞에 붙여 사용하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다. #아이디{ 속성1:속성값; 속성2:속성값; } class에 줄 경우 아래처럼 . 을 맨 앞에 붙여 사용하며, 여러 객체에 적용할 수 있습니다. .클래스명{ 속성1:속성값; 속성2:속성값 } [사용법] #m_box{ width:500px; height:300px; } .box{ background-color:blue; } [예제] [결과]

[개요] 아래 처럼 사용하며 태그 전부에 스타일을 적용시킵니다. 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } [사용법] span { color:#F00; } div { color:#0F0; } [예제] h5태그 h6태그 [결과]