공부하고 또 공부하는

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

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

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

CSS는 어떤 태그들에게 스타일 효과를 주는 언어입니다. 어떤태그에 적용하는지를 정의하는 문법이 필요하게 되는데, 이때의 문법을 선택자라고 합니다. 선택자 { 속성1: 값1; 속성2: 값2; } CSS는 위 예시처럼 선택자를 먼저 쓰고 중괄호 {} 안에 속성과 값을 적는 방식으로 이루어져 있습니다. CSS의 선택자는 다음 3개로 이루어져 있습니다. 태그 선택자 id 선택자 class 선택자 [태그선택자 예시] 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } [id 선택자 예시] #아이디{ 속성1:속성값; 속성2:속성값; } [class 선택자 예시] .클래스명{ 속성1:속성값; 속성2:속성값 } 이 3개의 선택자를 조합하는 방식으로 원하는 태그에 원하는 스타일을 적용시킬 수 있습니다.