CSS레이아웃-22.04.05

HTML 2022. 4. 5. 17:29

728x90

css리스트

none : 지정하지 않음
disc : 검은 원형
lower-roman : 소문자 로마자
decimal : 1부터 시작하는 10진수
upper-alpha : 대문자 알파벳
circle : 원형
square : 사각형
lower-alpha : 소문자 알파벳

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
ol, ul{
  list-style-type: decimal;
}

p{
  border: 1px solid red;
  display: list-item;
/*   list-style-type: square; */
 list-style-image: url(../images/check.png);
  list-style-position: inside;
  margin-left: 50px;
}
</style>
</head>
<body>
  <ol>
    <li></li>
    <li></li>
    <li></li>  
  </ol>
  <ul>
    <li></li>
    <li></li>
    <li></li> 
  </ul>
  <hr>
  <p>내용1</p>
  <p>내용2</p>
  <p>내용3</p>
  <p>내용4</p>
  </hr>
</body>
</html>

list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다.

inside : 문단 안쪽에 놓습니다.
outside : 문단 바깥쪽에 놓습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
 table{ 
  width:500px;
  border-collapse: separate;   /*separate: 두줄짜리  기본임 collapse:한줄 짜리*/
  /*border-spacing:10px 간격이 벌어진다.*/
  caption-side: bottom;   /*테이블 제목 위치*/
  empty-cells: hide;  /*데이터가 없는 즉 비어있다면 그려주지 않는다.*/
  table-layout: fixed;  /*auto: 자동으로 맞춰줌*/
  word-wrap: break-word;  /*잘리는 데이터 나올 수 있게 */
  
 } 
td{
  width: 140px;
  text-align: right;
}
 
</style>
</head>
<body>
  <table border="1">
  <caption>테이블 제목 표시</caption>
   <tr>
    <th>11111111111111111111111</th>
    <th>22</th>
    <th>3333333333</th>
    </tr>
     <tr>
    <td>1</td>
    <td></td>
    <td>3</td>
    </tr>
      <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
      <tr>
    <td>1</td>
    <td></td>
    <td>3</td>
    </tr>
      <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
     <tr>
    <td>1</td>
    <td></td>
    <td>3</td>
    </tr>
  </table>
</body>
</html>

border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다.

separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

속성값이 separate일 때, 간격의 크기는 border-spacing 속성으로 정합니다.

table-layout는 테이블 내용 즉 셀 내용에따라 너비 결정 ,fixed일때 word-wrap으로 글자 안깨지게 해주기

auto

자동 레이아웃 (기본값).
가장 긴 셀 내용이 셀 너비 결정.

fixed

고정 레이아웃. 테이블 및 열 너비는 테이블 및 열 너비 또는 첫 번째 셀 행 너비로 설정. 다른 행의 셀은 열 너비에 영향 안 미침. 첫 번째 행에 너비가 없으면 셀 내부의 내용에 관계없이 열 너비가 테이블에서 동일하게 나뉨.

initial

이 속성의 기본값으로 설정.

inherit

부모 요소의 속성값 상속.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
 div{
  width: 500px;
  height: auto;
  background-image: url(../images/스폰지밥.png);
  border: 20px solid orange;
  padding: 20px;
  background-repeat: repeat; 
  background-size: 25px, 25px;
  
 }
 p{
   background-color: yellow;
   padding: 10px;
 }
</style>
</head>
<body>
  <div>
   <p>
  16세기 조선의 무신으로, 일본이 조선을 침공하여 일어난 전쟁인 임진왜란 당시 조선 수군[13]을 통솔했던 제독이자 구국영웅이다.
    침략군과 교전하여 천재적인 활약상을 펼치고 중앙 지원 없이 자급자족을 해낸 군 지휘관이자, 휘하 장병들에게 원리원칙 엄수를 요구했지만
     높은 승률과 넉넉한 처우를 보장한 상관, 지방관 시절 백성들에게 선정을 베풀고 전시에도 그들을 위무하고 구제한 목민관, 
     고위 관료와 접선 및 축재를 거부하고 공정과 절제를 중시한 인격자, 자신이 관할한 지역의 백성과 병사에게 각종 사업을 장려하여 많은 수효를 얻어낸 행정가,
     그리고 왕을 위시한 조정의 핍박으로 해임되어 사형수가 되거나 후임자의 실책으로 군사·군선들을 거의 상실하거나 어머니와 아들을 잃는 등 많은 수난을 겪고도
     명량 해전 등에 임하며 굴하지 않은 철인의 면모까지 갖춰 조선 중기의 명장을 넘어 한국사 최고 위인의 반열까지 오른 인물이다.
    </p>
  </div>
</body>
</html>

background-repeat

배경 이미지의 반복 여부와 반복 방향을 정합니다.

repeat : 가로 방향, 세로 방향으로 반복합니다.
repeat-x : 가로 방향으로 반복합니다.
repeat-y : 세로 방향으로 반복합니다.
no-repeat : 반복하지 않습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

<div>는 줄바꿈이 되지만 <span>은 줄바꿈이 되지 않는다. <span>어떠한 의미도 가지지않지만 스타일링을 위해 요소들을 그룹화하거나 lang속성과 같은 속성값을 공유하는데 유용하게 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
p{
  border: 2px solid red;
  width:  200px;
  height: 100px;
}
.ex1{
  display: inline;  /*자기 영역만 */
}
.ex2{
  display: block;
}
.ex3{
  display: inline-block;  /*자기영역만 가져오고 뒤에는 짤림*/
}
.ex4{
  display: none;   /*내용이 사라져 버림*/
}
</style>
</head>
<body>
 <h4>display: inline</h4>
 <div>
   You are my <p class="ex1">celebrity</p>
   !!!!!!!!!!!!!!
 </div>
 
 <h4>display: block</h4>
 <div>
   You are my <p class="ex2">celebrity</p>
   !!!!!!!!!!!!!!
 </div>
 
 <h4>display: inline-block</h4>
 <div>
   You are my <p class="ex3">celebrity</p>
   !!!!!!!!!!!!!!
 </div>
 
 <h4>display: none</h4>
 <div>
   You are my <p class="ex4">celebrity</p>
   !!!!!!!!!!!!!!
 </div>
</body>
</html>

visibility 속성은 태그의 가시성을 결정합니다.

아래의 4가지 값을 가지며, 기본 값은 inherit 입니다.

visible: 보임
hidden: 숨김 (자신의 영역은 계속 차지)
collapse: 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)
inherit: 부모 요소의 값을 상속

.ex4 {
/*    display: none;  */
  visibility: hidden; 
}

=> p태그 내용이 숨겨진 것을 볼 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
  width: 100px;
  height: 50px;
  border: 1px solid green;
  margin: 10px;
}
#d0 {
  background-image: linear-gradient(45deg, yellow, white, red);
  position: static;
  top: 100px; /* static은 위치 설정값이 적용되지 않음 */
}
#d1 {
  background-image: radial-gradient(yellow, white, red);
  position: relative;
  top: 100px;
}
#d2 {
  background-image: conic-gradient(from 0deg, red, orange, yellow, green, blue);
  position: absolute;
  top: 100px;
  left: 100px;
}
#d3 {
  background-image: repeating-linear-gradient(45deg, red 0px, red 5px, blue 5px, blue 10px);
  position: relative;
}
#d4 {
  position: absolute;
  top: 100px;
  left: 100px;
/*   부모를 기준으로 100씩 이동  */
}
#d5 {
  position: fixed;
  top: 100px;
  left: 100px;
/*   스크롤을 해도 고정되어있음 */
}
</style>
</head>
<body>
  <h4>정적위치(static) : 정상적인 흐름으로 배치</h4>
  <div>static1</div>
  <div id="d0">static2</div>
  <hr>
  
  <h4>상대위치(relative) : 정적위치를 기준으로 배치</h4>
  <div id="d1">relative1</div>
  <div>relative2</div>
  <hr>
  
  <h4>절대위치(absolute) : 특정 부모를 기준으로 배치</h4>
        부모가 static이 아닌 나머지 속성 중 하나로 지정되어야 한다.
        부모가 static한 상태일 경우 컨테이너(윈도우, 브라우저)를 기준으로 배치
  <div>absolute1</div>
  <div id="d2">absolute2(부모가 컨테이너)</div> <!-- 지금 부모는 <body>, static한 상태라 컨테이너를 기준으로 배치 -->
  <div id="d3">부모 
    <div id="d4">absolute2(부모가 d3)</div>
  </div>
  <hr>
  
  <h4>고정위치(fixed) : 컨테이너(윈도우, 브라우저)의 원점을 기준으로 배치</h4>
  <div id="d5">fixed1</div>
  <div>fixed2</div>
  <hr>
  
</body>
</html>

<z-index>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
   border: 1px solid orange;
   width: 100px;
   height: 100px;
   position: absolute;
}
#d1 {
   background-color: lightblue;
   top: 10px;
   left: 10px;
}
#d2 {
   background-color: yellow;
   top: 30px;
   left: 30px;
   /*z-index: 1;   앞으로 이동하기 위해 양수값 */
}
#d3 {
   background-color: lightgreen;
   top: 50px;
   left: 50px;
}
#d4 {
   background-color: pink;
   top: 70px;
   left: 70px;
   z-index: -1;  /*4를 맨밑으로 보내고 싶을 때*/
}
</style>
</head>
<body>
   <div id="d1">1</div>
   <div id="d2">2</div>
   <div id="d3">3</div>
   <div id="d4">4</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
p{
  position: absolute;
  top: 50px;
  left: 50px;
  color: red;

}
div{
  position: relative;
}
img{
  width: 100%;   /*왔다갔다 창 크기에 따라 변하도록 */
}
</style>
</head>
<body>
 <h2>다른 요소를 얹어봐요...</h2>
 <h2>다른 요소를 얹어봐요...</h2>
 <h2>다른 요소를 얹어봐요...</h2>
 <h2>다른 요소를 얹어봐요...</h2>
 <h2>다른 요소를 얹어봐요...</h2>
 <div>
 <img src="../images/스폰지밥.png" alt="스폰지밥.png">
 <p>창크기가 변해도 본 텍스트는...</p>
 </div>
  
</body>
</html>

<float>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{

 width:  100px;
 height: 100px;
 border: 3px solid yellow;
 background-color: red;
 opacity: .2;
}
#d1{
  float: left;
  background-color: blue;
  opacity: .2;
}
#d2{
  width: 140px;
  float: right;
}
</style>
</head>
<body>
 <div id="d1">div(Block) A</div>
 <div id="d2">div(Block) B</div>
 
 </div>

   
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{

 width:  100px;
 height: 100px;
 border: 3px solid yellow;
 background-color: red;
 opacity: .2;
}
#d1{
  float: left;
  background-color: blue;
  opacity: .2;
}
#d2{
  width: 140px;
/*   float: right; */
}
</style>
</head>
<body>
 <div id="d1">div(Block) A</div>
 <div id="d2">div(Block) B</div>
 
 </div>

   
</body>
</html>

div{
  border: 1px solid blue;
  box-sizing: border-box;   /*떨어져 나갔으므로 이것을 줘서 잘 붙도록*/
}

수정 후

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
  border: 1px solid blue;
  box-sizing: border-box;   /*떨어져 나갔으므로 이것을 줘서 잘 붙도록*/
}
#hd{
  background-color: yellow;
  height: 80px
}
#nv{
 background-color: red;
  height: 400px;
  width: 30%;
  float: left;
/*   opacity: .2; */
}
#ct{
 background-color: blue;
  height: 400px;
  width: 70%;
  float: right;
/*   opacity: .2; */
}
#ft{
 background-color: violet;
  height: 50px;
  clear: both;  /*양쪽 값 다 끊어주겠다*/
}
</style>
</head>
<body>
   <div id="hd">head</div>
   <div id="nv">nav</div>
   <div id="ct">content</div>
   <div id="ft">footer</div>
</body>
</html>

clear: both 오른쪽 왼쪽을 취소

div{
  border: 1px solid blue;
  box-sizing: border-box;   /*떨어져 나갔으므로 이것을 줘서 잘 붙도록 테두리와 안쪽 여백 값을 포함시킴*/
  margin: 2px;
}

또 떨어져 나감 그래서

수정

<style>
div{
  border: 1px solid blue;
  box-sizing: border-box;   /*떨어져 나갔으므로 이것을 줘서 잘 붙도록 테두리와 안쪽 여백 값을 포함시킴*/
  margin: 2px;
}
#hd{
  background-color: yellow;
  height: 80px
}
#nv{
 background-color: red;
  height: 400px;
  width: calc(30% - 4px);  /*내가 지정한 콘텐츠 값에서 마진 값 포함 안되어있으니까 2*2를 빼준다.-는 공백이 다있어야 한다.*/
  float: left;
/*   opacity: .2; */
}
#ct{
 background-color: blue;
  height: 400px;
  width: calc(70%-4px);
  float: right;
/*   opacity: .2; */
}
#ft{
 background-color: violet;
  height: 50px;
  clear: both;  /*양쪽 값 다 끊어주겠다*/
}
</style>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
  border: 1px solid black;
  box-sizing: border-box;  /* 테두리와 안쪽여백 값을 포함시킴/ margin값은 포함X */
  margin: 2px;
  
}
/* #hd {
  background-color: lightyellow;
  height: 80px;
} */
header {
  background-color: lightyellow;
  height: 80px;
  border: 1px solid black;
} 

#nv, nav {
  background-color: pink;
  height: 400px;
  width: calc(30% - 4px); /* calc()메서드 사용시 - 앞뒤로 공백이 반드시 있어야한다. */
  float: left;
/*   opacity: .2; */
}
#ct, main {
  background-color: lightblue;
  height: 400px;
  width: calc(70% - 4px);
  float: right;
/*   opacity: .2; */
}
#ft, footer {
  position: relative;
  top: 2px; 
  background-color: violet;
  height: 50px;
  clear: both;
}
</style>
</head>
<body>
<!--   <div id="hd">header</div> -->
  <header>header</header>
  <div id="nv">nav</div>
  <div id="ct">content</div>
  <div id="ft">footer</div>
  
  <hr>
  
  <pre>
    시맨틱 : 기계간 이해할 수 있는 관계로 컴퓨터가 정보를 쉽게 수집하거나 이해하도록 만든 의미적인 것
       
        <div></div>로 구성된 레이아웃보다 시맨틱태그로 구성한 레이아웃이 컴퓨터와 개발자에게 더 도움이 된다.
  </pre>
  
  <header class="a">header</header>
  <nav class="a">nav</nav>
  <main class="a">content</main>
  <footer class="a">footer</footer>
</body>
</html>

calc(70% - 4px);
margin: 2px;

패딩값을 줬을경우 70에 이미 포함되어있지만 마진은 포함이 안되어있다.
그래서 마진*2를 해줘서 빼기를 해준다.

728x90

'HTML' 카테고리의 다른 글

자바스크립트,HTML요소 접근-22.04.06 (0)	2022.04.06
HTML 유용한 정보 (0)	2022.04.06
마진과 패딩-22.04.05 (0)	2022.04.05
css2-22.04.05 (0)	2022.04.05
css-22.04.04 (0)	2022.04.04

ABOUT ME

하루복습 하루복습

'HTML' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'HTML' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바