CSS 02/23

CSS

CSS 02/23

SangssI 2023. 2. 23. 21:25

CSS

텍스트 데코레이션
.a1 { text-decoration: none; } 텍스트에 선을 없앰
.a2 { text-decoration: overline; }  /* 텍스트 위쪽에 선이 그려짐 */
.a3 { text-decoration: underline; } /* 텍스트의 밑줄 */
.a4 { text-decoration: line-through; } /* 텍스트의 상쇄선 */

블록 요소를 인라인요소로 만들기
<ul>
<li><img src="image/ub_menu_navi_01.jpg"></li>
<li><img src="image/ub_menu_navi_02.jpg"></li>
<li><img src="image/ub_menu_navi_03.jpg"></li>
<li><img src="image/ub_menu_navi_04.jpg"></li>
<li><img src="image/ub_menu_navi_05.jpg"></li>
</ul>

li { list-style: none;  // 리스트의 점을 제거
     display: inline; } // 블록요소인 li를 인라인요소로 바꾸어 웹 홈페이지에 세로정렬이 아닌 가로정렬이 됨

OverFlow
글자의 내용이 지정한 너비와 높이를 초과하여 테두리를 벗어나는 경우 사용하는 속성
p { border : 1px solid black;
     padding : 5px;
     width: 150px;
     height: 50px; }

.a1 { overflow: hidden; } /* 공간을 초과하면 공간에 맞게 짤림 */ /* 꼭 알아 놓기 */
.a2 { overflow: scroll; } /* 내용이 초과하는것과 별개로 무조건 스크롤을 보여주는 속성 */
.a3 { overflow: auto; } /* 내용이 넘칠때만 보여주는 스크롤 */
.a4 { overflow: visible; } /* 넘치는 내용을 다 표시함(기본값) */
.a5 { overflow: scroll; } /* 내용이 초과하는것과 별개로 무조건 스크롤을 보여주는 속성 */

qwelkjqwlrkjqlwrkjqlwrkjqkrj;qwrkjajqwrkjhqwkrhqlkwrjhlqwkrjhqlkwjr 
쨍쨍한 햇볕이나 시우너한 비 눈보라도 철길에서 만나는 반가운 친구들 

가상 클래스 를 사용할때는 태그뒤에 : 사용

p:first-child {color: blue } /* 각각의 영역에서 p태그중 가장 첫번째 태그를 접근하는 가상 클래스(first child) : 을 사용함 */
p:last-child { color: red } /* 각각의 영역에서 p태그중 가장 마지막 태그를 접근하는 가상 클래스(last child) : 을 사용함 */

특정한 위치의 속성을 변경하고 싶을때 사용하는 가상 클래스(pseudo 클래스)

li { display: inline; //블록요소를 인라인 요소로 ( 가로 정렬됨 )
list-style: none; // 리스트의 점을제거
font-size: 50px; } // 텍스트 글자의 크기를 50픽셀로 지정
li:nth-child(odd) { color: red; } /* 홀수위치의 태그의 속성 변경 */
li:nth-child(even) { color: green; } /* 짝수 위치의 태그의 속성 변경*/
li:nth-child(4n) { background: yellow; } /* 4의 배수 위치 태그의 속성 변경*/
li:nth-child(6) { color: black ;
  background: aqua;} /* 6번째 위치의 태그에 접근 */

링크(a태그)의 가상 클래스
a { text-decoration: none; color: gray; }
a:visited {color: purple;} /* 잘 사용하지 않음 방문한 기록이 있으면 바뀜 */
a:hover { color: orange; /* 마우스 오버 감지 */
text-decoration: underline;}
a:active { color: red; } /* 마우스 클릭 감지

선언순서 중요 ( visited -> hover -> active 이런 순서로 선언해야 감지를 함 )*/

position 및 z-index

*{ margin: 0; padding: 0;} /* (* = 전체 태그를 접근) 전체태그의 마진과 패딩을 0으로 지정

p { border: 1px solid black;
width: 50px;
padding: 50px;
position: absolute;} /* 태그나 이미지등 브라우저 기본 절대값 (0,0) 으로 위치 변경 */ /* left와 top,right,bottom을 사용하기위해 무조건 속성을 주어야함 */

.box1{ background: yellow; left: 100px; top: 100px;
z-index: 3;} /* z-index = 겹치는 부분의 순서를 지정해줌 3번째*/
.box2{ background: orange; left: 120px; top: 120px;
             z-index: 2;} /* z-index = 겹치는 부분의 순서를 지정해줌 2번째*/
.box3{ background: aqua;  left: 140px; top: 140px;
             z-index: 1;} /* z-index = 겹치는 부분의 순서를 지정해줌 첫번째*/

float(왼쪽,오른쪽 정렬)
블록요소의 정렬을 왼쪽 오른쪽 정렬을 위해 사용
* { margin: 0; padding: 0;}
#container { width: 500px;
margin: 10px auto;
border : 5px solid #caa;
padding: 10px;
background: #fdd;
overflow: hidden;}  /* 자식이 float속성을 가지고 있다면 부모의 태그는 무조건 overflow: hidden을

가지고 있어야한다. */  /* 자식의 float을 해제한다 */
h1 { text-align: center; }
.greentea { width: 200px;
               padding: 15px;
background: #ba7;
height: 100px;
color: white;
float: left;}
.coffee { width: 200px;
height: 100px;
padding: 15px;
background: #dda;
float: right;}  /* 중앙정렬은 없으며 left right의 속성만 존재한다. */
/* 블록요소를 인라인요소처럼 나열하며 사용하고 싶을때 display보다 float을 더 많이 사용하며 부모는 overflow: hidden을 가지고있어야 한다. */

float 정렬을 통한 layout
* {margin: 0; padding: 0}
#wrap { width: 650px;
margin: 0 auto;
border: 5px solid #f00;
background: black;}
#header { background: #09f;
text-align: center;
font: bold 20px;
margin-bottom: 10px;
padding: 10px 0;
color: white;}
#content { background: #ccc;
margin-bottom: 10px;
overflow: hidden;}
.left { float: left;
width: 180px;
height: 250px;
padding: 10px;
background: #fcf; }
.center { float: left;
width: 180px;
height: 200px;
padding: 10px;
background: #aaf;
margin-left: 25px; }
.right { float: right;
width: 180px;
height: 250px;
padding: 10px;
background: white; }
#footer{ background: #09f;
text-align: center;
padding: 10px 0;
color: #fff; }

외부 스타일 시트

<title>외부 스타일시트</title>

<link rel="stylesheet" href="CSS/reset.css">

<style>
/* 내부 스타일 시트 */
p {color: red;}
table { border-collapse: collapse;  /* 테이블의 border를 한줄로 표기한다 */
width: 200px;}
</style>

reset.css 파일 코드
@charset "UTF-8";
* {margin: 0; padding: 0 }
a {text-decoration: none;}
li {list-style: none;}

position layout CSS 코드 분석
<link rel="stylesheet" href="CSS/reset.css"> // link태그를 통해 CSS/reset.css 의 css파일을 참조한다. // 외부 스타일시트

<style>  // 내부 스타일 시트
#header {width: 1000px;   //너비를 1000픽셀로 지정
height: 80px; // 높이를 80픽셀로 지정
margin: 10px auto;  // 상하는 10의 마진으로 설정 / 좌우의 마진은 auto속성으로 자동으로 가운데 정렬을 함.
border: 1px solid red;  // 테두리는 1픽셀 선은 기본선 테두리색은 빨간색으로 지정
position: relative;} /* absolute 속성을 가진 자식을 내 자식으로 인지하도록 하는 코드 */

.aa { margin: 10px 0;} 바깥쪽 여백을 상하에는 10px 좌우에는 0으로 지정해줌
ul {overflow : auto;} // 부모클래스가 자식클래스의 float 속성을 위해 overflow:hidden의 속성을 가진것
li { float: left;} // 블록요소 li를 왼쪽 에서부터 가로로 정렬 해줌
p:last-child { position: absolute; right: 10px; top: 5px; } // p태그중 가장 마지막 태그에 position:apsolute 권한을 주고 오른쪽끝에서 부터 10px 떨어진곳, 위쪽에서 부터 5px떨어진 곳으로 위치 설정

.a1{position: absolute; left: 350px; top: 10px; }
.a2{position: absolute; left: 225px; top: 40px; }  /* absolute 원하는곳으로 좌표를 통해 자리를 잡을수 있다 position 부모는 position의 relative 속성을 가지고 있어야 한다. */
</style>

// 짝으로 이루어져야 하는 float 과 position의 태그들
float속성은 블록태그를 왼쪽과 오른쪽으로 (가운데는 없음) 정렬하기 위해 사용하는데 자식의 태그가 float속성을 가지면 반드시 부모의 태그에 overflow 속성 중 hidden 이나 auto 속성을 반드시 설정 해야한다. 부모가 overflow의 속성이 없다면 float의 속성을 가진 자식은 붕 뜨게 화면에 나타나며 부모의 overflow의 속성에 hidden을 추가한다면 부모의 테두리가 감싸안게 된다. 위의 코드에선 ul의 자식인 li전체에 float을 주었기때문에 ul의 속성이 overflow: hidden을 가지고 있는것이다.
position의 태그는 태그나 이미지를 코딩하는 사람이 직접 위치를 픽셀로 지정하기 위해 사용하는 속성으로 자식이 position:absolute; 속성을 가지면 사용자가 right, left, top, bottom 의 속성에 픽셀값을 주고 원하는 위치로 지정할수 있다. 여기서 주의할 점이 부모의 테두리 안에서 지정하기 위해선 부모 태그가 반드시 position:relative; 를 가지고 있어야 만이 자식의 태그가 부모의 테두리 안에서만 위치를 지정할수 있다. 그렇지 않으면 브라우저 화면에서의 위치로 이동하게 된다.
부모태그가 position:relative를 가지고 있다면 자식의 픽셀은 부모의 테두리 0,0의 값에서 시작한다. 반드시 자식클래스도 position:absolute 속성을 가져야만 위치를 지정받을 권한이 생긴다.

저작자표시 (새창열림)