공부하고 또 공부하는

[개요] 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태그 [결과]

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

[개요] Cascading Style Sheets의 약자 HTML을 웹사이트에서 화면에 표시되는 정보를 약속한 것. css는 구체적으로 어떤 스타일로 요소가 표시되는지를 정하는 규격이라고 할 수 있습니다. 초기의 웹은 HTML 하나로 문서의 뼈대로 만들고 꾸미기도 하였지만, 공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재합니다. css는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리해주어, 역할 분담도 되는 효과를 가지고 있습니다. [사용법] CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재합니다. 기술하는 방법은 아래의 3가지가 있습니다. 1. HTML 태그의 style 속성을 이용..

[개요] 태그는 HTML 문서에서 표를 만드는 태그입니다. 행과 열을 표현하기 위해 ,등의 태그와 함께 작성하게 됩니다. 예전에는 웹 페이지의 레이아웃을 구성할 때, 태그를 이용하여 많이 구성하였는데 현재는 태그와 CSS를 이용하여 많이 구현합니다. [속성] tr태그 : 표의 행을 나타냄. td태그 : 표의 열을 나타내며, 태그 하위에 위치함. [사용법] 섹션1 섹션2 [HTML 입력] [결과]

웹사이트는 크게 3가지 요소로 구성되어 있음. HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets), 자바스크립트 (Javascript) HTML(Hyper Text Markup Language) - 웹문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류 - 웹페이지에서 제목, 이미지, 동영상, 문단, 표 등을 정의하고 그 구조와 의미를 부여하는 정적 언어 - 웹의 구조를 담당 CSS(Cascading Style Sheets) - 마크업 언어(HTML, XML, XHTML등)가 실제 표시되는 방법(색상, 레이아웃, 크기, 폰트 등)을 지정하여 콘텐츠 구조를 구며주는 정적 언어 - 웹의 시각적인 표현을 담당 JavaScript - HTML ..