'css'에 해당되는 글 3건

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

댓글을 달아 주세요


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

댓글을 달아 주세요


INPUT 태그 스타일(속성)


항상 까먹고 검색을 하게 되서 나름 자주 사용한 것만 정리해 봅니다.



1. readonly


db통신을 통해 불러온 값을 보여주기만 하고, 수정이 불가능한 상태


<input type="text" readonly="readonly">

<input type="text" readonly>

2. disabled


readonly와 다르게 사용자로 하여금 사용 불가능한 상태를 보여줌



<input type="text" disabled="disabled">

<input type="text" disabled>

2. border


input 박스의 선색을 변경하는 방법


2가지 방법이 있습니다. input 태그 안에서 스타일을 지정하는 방법과 별도로 id와 같은 선택자로 css style을 

부여할 수 있습니다.


1. <input type="text" style="border: 1px solid red;">


이와 같이 태그안에 style 속성에 바로 부여하는 방법


2. <input type="text" class="선택자">


처럼 작성 후 <head>태그 사이에 <style>태그를 생성, <style> </style> 이 사이에 

선택자{ border : 1px solid red; } 로 작성하면 적용

3. placeholder


input박스의 사용 용도를 설명해 줄 수 있다


<input type="text">

<input type="text" placeholder="안녕하세요">

4. border-radius


input 박스의 모서리를 둥글게


선색을 변경하는 것과 마찬가지로 스타일을 적용하는 방법은 2가지 방법이 있습니다. 


1. <input type="text" style="border-radius : 10px;">


이와 같이 태그안에 style 속성에 바로 부여하는 방법


2. <input type="text" class="선택자">


처럼 작성 후 <head>태그 사이에 <style>태그를 생성, <style> </style> 이 사이에 

선택자{ border-radius : 10px; } 로 작성하면 적용






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, input

댓글을 달아 주세요