리버티게임:CSS: 두 판 사이의 차이
잔글 (→기본 모양새) |
|||
| (사용자 2명의 중간 판 7개는 보이지 않습니다) | |||
| 5번째 줄: | 5번째 줄: | ||
CSS를 사용하면 배경색을 넣어 예쁜 틀을 제작하고, 이미지의 모양새를 변경하고, 버튼의 색을 바꾸는 등 당신이 보는 리버티게임 페이지를 더 아름답게 만들 수 있습니다. 리버티게임의 수많은 화려한 틀들은 전부 CSS를 사용하여 만들었습니다. | CSS를 사용하면 배경색을 넣어 예쁜 틀을 제작하고, 이미지의 모양새를 변경하고, 버튼의 색을 바꾸는 등 당신이 보는 리버티게임 페이지를 더 아름답게 만들 수 있습니다. 리버티게임의 수많은 화려한 틀들은 전부 CSS를 사용하여 만들었습니다. | ||
리버티게임에서는 [[사용자:{{USERNAME}}/common.css]]와 같은 문서에서 | 리버티게임에서는 [[사용자:{{USERNAME}}/common.css]]와 같은 CSS 문서를 작성하여 모든 문서에서 나 스스로에게만 특정 요소를 다르게 보이게 만들 수도 있고, 일반 문서에서 #css 파서 태그를 사용해 해당 문서에 적용할 CSS 문서를 가져오거나 작성할 수 있습니다. 혹은 각 [[리버티게임:HTML 문법|HTML]] 태그의 style 값에 한 줄의 문자열로 태그에 적용할 CSS 속성을 적용할 수 있습니다. 이렇게 모양새를 바꾸는 설정을 스타일(style)이라고 하며, <code>(선택용 키): (값);</code>의 형태를 가지고 있습니다. | ||
<!-- 예시 하나: 특정 이미지 필터링 --> | <!-- 예시 하나: 특정 이미지 필터링 --> | ||
| 15번째 줄: | 15번째 줄: | ||
=== 기본 모양새 === | === 기본 모양새 === | ||
위에서 설명한 CSS 스타일을 #css 태그나 CSS 문서 내에서 사용할 때에는 '''선택자'''를 먼저 쓰고 ''중괄호로 감싼 영역'' 내에 스타일 속성들을 한 줄씩 적습니다. 모든 스타일 속성은 ;(세미콜론) 글자로 끝나야 합니다. | 위에서 설명한 CSS 스타일을 #css 태그나 CSS 문서 내에서 사용할 때에는 '''선택자'''를 먼저 쓰고 ''중괄호로 감싼 영역'' 내에 스타일 속성들을 한 줄씩 적습니다. 모든 스타일 속성은 ;(세미콜론) 글자로 끝나야 합니다. HTML 태그의 style 속성에 작성하는 경우, 중괄호 내의 속성들만 작성하면 됩니다. | ||
<syntaxhighlight lang=css> | <syntaxhighlight lang=css> | ||
/* 설명을 위한 주석은 이렇게 양 옆에 슬래시 문자와 별표 문자를 대칭으로 적고 그 사이에 이렇게 설명을 넣으면 됩니다. */ | /* 설명을 위한 주석은 이렇게 양 옆에 슬래시 문자와 별표 문자를 대칭으로 적고 그 사이에 이렇게 설명을 넣으면 됩니다. */ | ||
| 33번째 줄: | 33번째 줄: | ||
== 선택자 == | == 선택자 == | ||
=== id 선택자 === | === id 선택자 === | ||
아이디 선택자는 id 속성을 넣은 단 하나의 HTML 태그를 선택하여 스타일을 변경할 때 사용합니다. '''#''' 글자 뒤에 HTML 태그 내 id 값을 적는 식으로 사용합니다(예: <code>#myid</code>) | |||
=== 클래스 선택자 === | === 클래스 선택자 === | ||
아이디 선택자는 class 속성을 넣은 여러 개의 HTML 태그를 선택하여 스타일을 변경할 때 사용합니다. '''.''' 글자 뒤에 HTML 태그 내 class 값을 적는 식으로 사용합니다(예: <code>.myclass</code>) | |||
=== 태그 선택자 === | === 태그 선택자 === | ||
그냥 현재 페이지에 있는 모든 버튼이나 이미지를 선택할 수도 있습니다. 그런 경우에는 div, span, img, button 등 태그 종류를 그대로 쓰면 됩니다. | |||
링크를 고르고 싶은 경우에는 '''a'''라고 쓰면 됩니다. | |||
=== 속성 선택자 === | |||
=== 의사 클래스 === | |||
=== 자식 선택하기 === | === 자식 선택하기 === | ||
* <code>div > a</code> | CSS는 HTML DOM 구조에 따라 트리 구조로 설정하기 때문에, 부모 HTML 태그와 자식 HTML 태그 간의 관계를 선택자로 걸어 특정한 부분만 스타일 설정을 해야할 때가 많습니다. 다음은 자식을 선택하는 선택자들입니다. | ||
* <code>div > a</code>: div 바로 밑의 자식 a(하이퍼링크)만 선택합니다. | |||
* <code>div a</code>: div의 자식 a, 손자 a, 증손자 a, ... 등 모든 자손들을 선택할 때에 씁니다. | |||
* <code>div:first-child</code>: div의 첫번째 자식(일반적으로 문서 가장 위쪽-왼쪽에 나타나는 자식)을 선택합니다. | |||
* <code>div:last-child</code>: div의 마지막 자식을 선택합니다. | |||
* <code>div:nth-child(k)</code>: div의 k번째 자식을 선택합니다. 예를 들어 3번째 자식을 선택한다면 <code>div:nth-child(3)</code>으로 씁니다. | |||
== 크기 단위 == | == 크기 단위 == | ||
| 55번째 줄: | 72번째 줄: | ||
== 많이 설정하는 속성들 == | == 많이 설정하는 속성들 == | ||
== | == 미디어 쿼리: 반응형 웹페이지 만들기 == | ||
== 기타 및 참고자료 == | == 기타 및 참고자료 == | ||
위에서 설명한 내용 이외에도 애니메이션을 넣는 등 CSS로 할 수 있는 것이 정말 많습니다. CSS의 전체 내용을 알고 싶다면 [https://developer.mozilla.org/ko/docs/Web/CSS MDN의 CSS 설명 문서]를 보시고, 영어가 되는 분이라면 [https://www.w3schools.com/css/default.asp w3schools의 강좌]도 보시면 좋습니다. | 위에서 설명한 내용 이외에도 애니메이션을 넣는 등 CSS로 할 수 있는 것이 정말 많습니다. CSS의 전체 내용을 알고 싶다면 [https://developer.mozilla.org/ko/docs/Web/CSS MDN의 CSS 설명 문서]를 보시고, 영어가 되는 분이라면 [https://www.w3schools.com/css/default.asp w3schools의 강좌]도 보시면 좋습니다. | ||
2025년 1월 6일 (월) 17:47 기준 최신판
CSS(Cascading Style Sheet)는 웹 페이지를 더 예쁘게 디자인할 수 있는 웹 표준 명세입니다.
CSS를 사용하면 배경색을 넣어 예쁜 틀을 제작하고, 이미지의 모양새를 변경하고, 버튼의 색을 바꾸는 등 당신이 보는 리버티게임 페이지를 더 아름답게 만들 수 있습니다. 리버티게임의 수많은 화려한 틀들은 전부 CSS를 사용하여 만들었습니다.
리버티게임에서는 사용자:너/common.css와 같은 CSS 문서를 작성하여 모든 문서에서 나 스스로에게만 특정 요소를 다르게 보이게 만들 수도 있고, 일반 문서에서 #css 파서 태그를 사용해 해당 문서에 적용할 CSS 문서를 가져오거나 작성할 수 있습니다. 혹은 각 HTML 태그의 style 값에 한 줄의 문자열로 태그에 적용할 CSS 속성을 적용할 수 있습니다. 이렇게 모양새를 바꾸는 설정을 스타일(style)이라고 하며, (선택용 키): (값);의 형태를 가지고 있습니다.
CSS의 동작[원본 편집]
Cascading이라는 단어에 따라 CSS는 CSSOM이라는 트리 구조로 웹 페이지의 모양새를 구성하고 HTML DOM의 구조에 따라 렌더링합니다. 따라서 디자인을 할 때에는 각 요소 간의 간섭을 어느 정도 생각할 필요가 있습니다.
따라서 리버티게임에서 CSS를 사용할 때에는 저장 버튼 옆 미리 보기 단추를 적극적으로 사용하는 것을 권장합니다.
기본 모양새[원본 편집]
위에서 설명한 CSS 스타일을 #css 태그나 CSS 문서 내에서 사용할 때에는 선택자를 먼저 쓰고 중괄호로 감싼 영역 내에 스타일 속성들을 한 줄씩 적습니다. 모든 스타일 속성은 ;(세미콜론) 글자로 끝나야 합니다. HTML 태그의 style 속성에 작성하는 경우, 중괄호 내의 속성들만 작성하면 됩니다.
/* 설명을 위한 주석은 이렇게 양 옆에 슬래시 문자와 별표 문자를 대칭으로 적고 그 사이에 이렇게 설명을 넣으면 됩니다. */
#example {
display:flex;
flex-direction:row;
position:relative;
top: 1rem;
text-align:center;
color: white;
background-color: #00FF00;
margin: 2px;
border: 1px solid green;
}
선택자[원본 편집]
id 선택자[원본 편집]
아이디 선택자는 id 속성을 넣은 단 하나의 HTML 태그를 선택하여 스타일을 변경할 때 사용합니다. # 글자 뒤에 HTML 태그 내 id 값을 적는 식으로 사용합니다(예: #myid)
클래스 선택자[원본 편집]
아이디 선택자는 class 속성을 넣은 여러 개의 HTML 태그를 선택하여 스타일을 변경할 때 사용합니다. . 글자 뒤에 HTML 태그 내 class 값을 적는 식으로 사용합니다(예: .myclass)
태그 선택자[원본 편집]
그냥 현재 페이지에 있는 모든 버튼이나 이미지를 선택할 수도 있습니다. 그런 경우에는 div, span, img, button 등 태그 종류를 그대로 쓰면 됩니다.
링크를 고르고 싶은 경우에는 a라고 쓰면 됩니다.
속성 선택자[원본 편집]
의사 클래스[원본 편집]
자식 선택하기[원본 편집]
CSS는 HTML DOM 구조에 따라 트리 구조로 설정하기 때문에, 부모 HTML 태그와 자식 HTML 태그 간의 관계를 선택자로 걸어 특정한 부분만 스타일 설정을 해야할 때가 많습니다. 다음은 자식을 선택하는 선택자들입니다.
div > a: div 바로 밑의 자식 a(하이퍼링크)만 선택합니다.div a: div의 자식 a, 손자 a, 증손자 a, ... 등 모든 자손들을 선택할 때에 씁니다.div:first-child: div의 첫번째 자식(일반적으로 문서 가장 위쪽-왼쪽에 나타나는 자식)을 선택합니다.div:last-child: div의 마지막 자식을 선택합니다.div:nth-child(k): div의 k번째 자식을 선택합니다. 예를 들어 3번째 자식을 선택한다면div:nth-child(3)으로 씁니다.
크기 단위[원본 편집]
배치 관련 속성[원본 편집]
display[원본 편집]
block[원본 편집]
inline[원본 편집]
flex[원본 편집]
grid[원본 편집]
position[원본 편집]
static[원본 편집]
relative[원본 편집]
absolute[원본 편집]
fixed, sticky[원본 편집]
많이 설정하는 속성들[원본 편집]
미디어 쿼리: 반응형 웹페이지 만들기[원본 편집]
기타 및 참고자료[원본 편집]
위에서 설명한 내용 이외에도 애니메이션을 넣는 등 CSS로 할 수 있는 것이 정말 많습니다. CSS의 전체 내용을 알고 싶다면 MDN의 CSS 설명 문서를 보시고, 영어가 되는 분이라면 w3schools의 강좌도 보시면 좋습니다.