푸르생 스토리

html 과 css의 관계 기본 2편 / CSS 기초와 display 속성 본문

개발/HTML+CSS

html 과 css의 관계 기본 2편 / CSS 기초와 display 속성

푸르생 2021. 4. 7. 14:45
728x90
반응형
SMALL

 

예제 1 

<!DOCTYPE html>
<html lang="KR" {IF CLASSES}class="classes"{/IF}>

    <head>

    <meta charset="UTF-8">

    <title>{TITLE}</title>

    
    </head>

     <body>  
			<div>
			 <section>안녕하세요 1트</section>
			 <section>안녕하세요 2트</section>
			 <section>안녕하세요 3트</section>
			 <section>안녕하세요 4트</section>
			 <section>안녕하세요 5트</section>
			 <section>안녕하세요 6트</section>
			 </div>
			 
			 <section>안녕히 가세요 1트</section>
			 <section>안녕히 가세요 2트</section>
			 <section>안녕히 가세요 3트</section>
			 <section>안녕히 가세요 4트</section>
			 <section>안녕히 가세요 5트</section>
			 <section>안녕히 가세요 6트</section>
			 <section>안녕히 가세요 7트</section>
			 <section>안녕히 가세요 8트</section>
			 <section>안녕히 가세요 9트</section>
			 
				
     </body>

</html>
div{
	color:blue;
}

일때 결과 값

 

예제 2

html code는 동일

div{
	color:blue;
}

section{
	color:red;
}

결과 값

예제 3

html 동일

section{
	color:red;
}

div{
	color:blue;
}

 

CSS에서 section과 div에 명령의 순서를 바꾸어도 적용이 되는 기준은

부모 태그보다 자신의 태그에 직접 주는 CSS 명령이 적용 되는것을 볼 수 있네요.

 

예제4.(html code 동일)

section{
	color:red;
	
}

div > section{
	color:blue;
	margin:10px
}

위에서 확인 하셨듯이 section으로 red 색상을 주면 전체적으로 색상이 바뀌는걸 확인 하셨는데요.

위 부분이 추가 되므로 이런 결과가 나옵니다. 

 

예제 5.

html code

<!DOCTYPE html>
<html lang="KR" {IF CLASSES}class="classes"{/IF}>

    <head>

    <meta charset="UTF-8">

    <title>{TITLE}</title>

    
    </head>

     <body>  
		<div> 11 </div>
			 
		 <section> 22 </section>
			 
		 <section> 
				<div> 22 </div>
		 </section>
			 
	 </body>

</html>

CSS code

section div{
	color:red;
	
}

 

예제 6.

<!DOCTYPE html>
<html lang="KR" {IF CLASSES}class="classes"{/IF}>

    <head>

    <meta charset="UTF-8">

    <title>{TITLE}</title>

    
    </head>

     <body>  
			 
			 안녕하세요.<br/>
			 display = 속성<br/>
			 block = 줄 바꿈<br/>
			 inline-block : 줄 안바꿈<br/>
			 
			 퍼블리싱에서 자주 인용되는 말이 있다.<br/>
			 "일단 display로 해보고 안되면 position과 float으로 해결하라"<br/>
			 
			 
			 <div1> div1 </div1>
			 <section1> section1 </section1>
			 <div2> div2 </div2>
			 <section2> section2 </section2>			 
			 
		 </body>

</html>
body > div1{
	background-color:red;
	margin:10px;
}

body > div2{
	display:block;
	background-color:red;
	margin:10px;
}

body > section1{
	display:inline-block;
	background-color:blue;
	margin:10px;
}

body > section2{
	display:inline-block;
	background-color:red;
	margin:10px;
}

결과.

 

 

2021.04.07 - [개발/HTML+CSS] - html 과 css의 관계 기본 1편 -이전글

 

html 과 css의 관계 기본 1편

html 코드 {TITLE} 안녕 div 구분 h1 포함 확인 css 코드 div, h1{ color: blue; font-size bold; background-color: red; } 결과 창 #css등 #html css #css float #css flex #css display #C S..

windflow.co.kr

 

 

html 과 css의 관계 기본 1편

html 코드 {TITLE} 안녕 div 구분 h1 포함 확인 css 코드 div, h1{ color: blue; font-size bold; background-color: red; } 결과 창 #css등 #html css #css float #css flex #css display #C S..

windflow.co.kr

 

#css등급 #html css #css float #css flex #css display #C S S Industries, Inc. #CS stands #CSS & CSS3 20 Lessons to Successful Web Development 20 Lessons to Successful Web Development [ENH #CSS (Paperback) #css 란 #css position #css background-image #css 선택자 #css transition #css border #cssc #css margin #css font #cssports #css 공법 #css 가운데 정렬 #css 주석 #css table #css animation

728x90
반응형
LIST
저작자표시 비영리 변경금지

'개발 > HTML+CSS' 카테고리의 다른 글

html 과 css의 관계 기본 5편 / CSS inherit  (0) 2021.04.07
html 과 css의 관계 기본 4편 / CSS 선택자.  (0) 2021.04.07
html 과 css의 관계 기본 3편 / CSS 기초와 display의 대표적인 속성 3가지  (0) 2021.04.07
html 과 css의 관계 기본 1편  (0) 2021.04.07
html. AZ 총정리!  (0) 2021.04.07
'개발/HTML+CSS' Related Articles more