'Developer/CSS'에 해당되는 글 4건

css 이미지 태그 정렬방법


이미지 태그를 정렬하는 방법을 알아 보겠습니다.




1. 이미지를 block 요소로 만들어 margin으로 정렬


이미지에 block으로 만들어 margin에 영향을 받게하여 이미지를 가운대로 정렬할 수 있습니다.


<style type="text/css">


img{

display : block;

margin : auto;

}

</style>

<body>


<img src="test.png" />


</body>



2. 이미지 상위 요소에 text-aling속성을 사용하여 정렬


text-align은 block요소에서만 사용이 가능, block요소 안의 inline 요소를 정렬해주는 속성

마찬가지로 왼쪽 left, 오른쪽 right 로 적용 가능합니다.


<style type="text/css">


p{

text-align : center;

}


</style>

<body>

<p>

<img src="test.png" />

</p>

</body>






blog 승제노트






↓ 공감, 댓글 부탁드려요 ↓

저작자 표시
신고

'Developer > CSS' 카테고리의 다른 글

CSS 이미지 가운대 정렬방법(왼쪽, 오른쪽)  (2) 2017.06.06
CSS 선택자 종류와 사용법  (0) 2017.05.27
CSS 적용하는 방법 3가지  (5) 2017.05.26
INPUT 태그 스타일(속성)  (3) 2017.05.24
블로그 이미지

SeungJe SeungJeNote

초보 개발자의 IT 정보 노트!!!

Tag css

댓글을 달아 주세요


선택자 종류 


종류는 너무너무 많으나 개인적으로 자주 사용하는 것만 포스팅하겠습니다.




1. 전체 선택자

*{ margin : 0; }

html 페이지 내부의 모든 태그에 영향을 주며 *만 쓰고 style을 나열한다




2. 태그

div { background-color : red; }

p { background-color : red; }

태그명이 div, p인 특정 태그에 영향을 주며 태그 이름만 쓰고 style을 나열한다




3. class

.myclass{ font-size : 17pt; }

클래스 이름이 myclass인 태그에 영향을 주며 class 이름앞에 마침표를 쓰고 style을 나열한다




4. id 

.myid{ font-color : ret; }

아이디 이름이 myid인 태그에 영향을 주며 id 이름앞에  #을 쓰고 style을 나열한다


클래스와 아이디 비교


기본적으로 class는 중복으로 사용이 가능하고, 아이디는 중복이 불가능합니다.

그래서 구조를 나눌 땐 id를 사용하여 유일값으로 사용하고 한 분류안에서 한가지 특성(body안에서 파란 글씨 부분)을 나타낼 때 class를 사용합니다.


예) 









 

#header{

border: 1px solid gray;

width: 300px;

height: 100px;

}


#center{

border: 1px solid gray;

width: 300px;

height: 300px;

}


#footer{

border: 1px solid gray;

width: 300px;

height: 100px;

}



.red{

width:50px;

height:50px;

color: red;

}


.blue{

width:50px;

height:50px;

color: blue;

}

<body>

<div id="header">

<h1>머리</h1>

</div>


<div id="center"><br>

<p class="red">빨강</p>

<p class="blue">파랑</p>

<p class="red">빨강</p>

<p class="blue">파랑</p>

</div>


<div id="footer">

<h1>다리</h1>

</div>

</body>





5. E[attr="val"]

input[type="text"] { padding-left: 10px;

input 태그 중 type이 text인 요소만 영향을 줍니다.


p[id="a"]{ color: red; }

p 태그 중 id가 a인 요소만 영향을 줍니다.


이와 같은 방법으로 응용이 가능하고 이러한 속성 선택자는 css뿐만 아니라 jquery에서도 많은 사용을 하게 되는 선택자입니다. 






blog 승제노트






↓ 공감, 댓글 부탁드려요 ↓

저작자 표시
신고

'Developer > CSS' 카테고리의 다른 글

CSS 이미지 가운대 정렬방법(왼쪽, 오른쪽)  (2) 2017.06.06
CSS 선택자 종류와 사용법  (0) 2017.05.27
CSS 적용하는 방법 3가지  (5) 2017.05.26
INPUT 태그 스타일(속성)  (3) 2017.05.24
블로그 이미지

SeungJe SeungJeNote

초보 개발자의 IT 정보 노트!!!

Tag selector

댓글을 달아 주세요


CSS 적용 3가지 방법


1. 태그에 직접적으로 선언하기


<div style="background-color: #ff0000"> 다양하게 CSS 적용하기 </div>

<div style="background-color: #00ff00"> 다양하게 CSS 적용하기 </div>

<div style="background-color: #0000ff"> 다양하게 CSS 적용하기 </div>


이렇게 태그안에 직접적으로 style을 선언할 수 있다.



2. <head>안에 <style>태그 선언하기


<head>

<style type="text/css">


div:nth-child(1){

background-color: #ff0000;

}

div:nth-child(2){

background-color: #00ff00;

}

div:nth-child(3){

background-color: #0000ff;

}


</style>

</head>

<body>


<div> 다양하게 CSS 적용하기 </div>

<div> 다양하게 CSS 적용하기 </div>

<div> 다양하게 CSS 적용하기 </div>


</body>


<style>태그에 css를 모아서 관리할 수 있다.

div:nth-child(1) 선택자로써 "div태그의 첫 번째"  (다음 포스팅에 선택자에 대해서 자세히 올리겠습니다~)



3. 외부에 문서로 선언하고 link태그로 불러오기


test.jsp or test.html 파일


<head>

<link href="cssgroup.css" rel="stylesheet" type="text/css">

</head>



cssgroup.css 파일


div:nth-child(1){

background-color: red;

}

div:nth-child(2){

background-color: #00ff00;

}

div:nth-child(3){

background-color: #0000ff;

}


test.jsp or test.html 파일과 동일한 경로에 cssgroup.css 파일이 있기 때문에 link="cssgroup.css" 작성

1번 방법은 간단하지만 2,3번은 어려울 수 있지만, 쉽게 생각해서 외부에 css만 모아두는 파일을 link로 가져오게 되면 

2번 같은 방법으로 <head> 태그 사이의 <link="cssgroup.css" rel="stylesheet" type="text/css"> 이 부분이  


div:nth-child(1){

background-color: red;

}

div:nth-child(2){

background-color: #00ff00;

}

div:nth-child(3){

background-color: #0000ff;

}


이렇게 바뀌게 된다고 생각하시면 될 것 같습니다.






blog 승제노트






↓ 공감, 댓글 부탁드려요 ↓

저작자 표시
신고

'Developer > CSS' 카테고리의 다른 글

CSS 이미지 가운대 정렬방법(왼쪽, 오른쪽)  (2) 2017.06.06
CSS 선택자 종류와 사용법  (0) 2017.05.27
CSS 적용하는 방법 3가지  (5) 2017.05.26
INPUT 태그 스타일(속성)  (3) 2017.05.24
블로그 이미지

SeungJe SeungJeNote

초보 개발자의 IT 정보 노트!!!

Tag css

댓글을 달아 주세요