Networks/HTML & CSS & JS

SK networks AI Camp - CSS기능

코딩하는 Español되기 2024. 7. 31. 20:00

CSS에 대해 배웁니다.

 

아래의 링크에서 진행

https://codepen.io/seulbinim/pen/rRjBpp/

 

<img> element

...

codepen.io

 

1. text

  ○ text.html, text.css

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./text.css">
    <title>Document</title>
</head>
<body>
    <h1>This is my website</h1>
    <h3>@font-face는 일반적인 속성과 달리 CSS에서 사용할 font-family의 이름과 자원을 정의할 수 있는 규칙으로, 사용자의 환경에 설치된 폰트 또는 제작자가 서버에서 제공한 폰트를 다운로드하여 사용할 수 있도록 해줍니다.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptatem accusamus doloremque qui culpa, veritatis tenetur soluta molestiae earum rerum cupiditate excepturi ipsum consequatur in ea, exercitationem corporis harum ducimus?</p>
</body>
</html>

 

body{
    background-color: black;
}

h1{
    color: white;
    font-family: "Courier", "consolas", serif;
    font-style: oblique;
}

@font-face {
    font-family : 'SDSamliphopangche_Outline' ;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/SDSamliphopangche_Outline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
h3 { 
    color: white;
    font-family : 'SDSamliphopangche_Outline' ; 
    text-align: center;
}

p{
    color: aquamarine;
    font-family: "Arial", "consolas", sans-serif;
    font-style: italic;
    font-weight: bold;
    text-decoration: wavy underline;
    font-size: 18px;
}

      ● background-color : 배경색
      ●  color : 색깔
      ●  font-family : 폰트 이름
      ● src : 텍스트 소스 다운 주소
      ●  text-align : center = 가운데 정렬
      ●  ctrl + ? : 주석처리단축키
      ●  font-style: italic;  살짝 기울임체
      ●  text-decoration : waby underline;  물결모양의 아랫줄

2. box

  ○ box.html, box.css

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="box.css">
  <title>Document</title>
</head>
<body>
  <h1>none</h1>
  <div class="display-none">1</div>
  <div>2</div>
  <div class="invisible">3</div>
  <div>4</div>

  <h1>block</h1>
  <div class="block1">1</div>
  <div class="block2">2</div>
  hello

  <h1>inline</h1>
  <p>
    Lorem ipsum dolor sit amet, <span class="inline1">consectetur adipiscing elit</span>,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in <span class="inline2">reprehenderit</span>
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <h1>inline-block</h1>
  <p>
    Lorem ipsum dolor sit amet, <span class="inline-block1">consectetur adipiscing elit</span>,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in <span class="inline-block2">reprehenderit</span>
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <h1>padding</h1>
  <div class="padding1"></div>

  <h1>margin</h1>
  <div class="margin1">
    Hello World
  </div>

</body>
</html>
.display-none{ 
	display: none;
}
.invisible{ 
	visibility: hidden; 
}

.block1{ 
	width: 300px; 
	border: 3px solid #333 
}
.block2{ 
	width: 200px; 
	border: 3px solid #999 
}

.inline1{
	background: #09c;
}
.inline2{
	width: 200px; /* 이 값은 무시됩니다 */
	border: 3px solid #999;
}

.inline-block1{
	display: inline-block;
	background: #09c;
	height: 45px;
	/* 원래 inline 요소의 높이는 글자(폰트)의 높이를 바탕으로 설정되지만,
	inline-block을 이용하면 임의로 높이 또한 설정을 할 수 있습니다. */
}
.inline-block2{
	display: inline-block;
	width: 200px; /* 이 값은 이제 정상 작동합니다 */
	border: 3px solid #999;
}

.padding1{
	background-color: greenyellow;
	padding: 20px;
	border: 5px solid red;
}

.margin1{
	margin: 50px;
	padding: 50px;
	border: 50px solid red;
}

      ● 안보이게 하는 방법 : .display-none, .invisible

         - .display-none : text, div 전부 안 나타남

         - .invisible : div는 그렸지만 text만 안 보이는 기능

     

    ● div

      :  컨텐츠 영역(데이터가 들어가는 파란 부분)은 다 차지하지만 margin, padding, border는 차지 안 함

 

   ● block

     : 전체 레이어 다 차지하지만 width를 사용해 지정 가능 (+ border, solid(색상) 조절 가능)

 

 

 

    ● inline

      : 너비 개념이 없음, 컨텐츠 영역만큼만 너비 차지(auto) 즉, 크기를 설정해 줘도 무시됨

        inline2의 width를 200px로 지정했지만 text크기만큼만 영역차지

 

    ● inline-block

      : inline + block 같은 느낌

        inline처럼 자신의 콘텐츠만큼만 자리차지 +block처럼 컨텐츠를 벗어난 자신의 영역을 설정가능

 

    ● padding

      : 선(border)과 컨텐츠 사이에 영역

        - border : 빨간색

        - padding : 선 안쪽의 영역(초록색 부분)

 

    ● margin

        - 컨텐츠 : Helloworld가 있는 하늘색 부분

        - padding : 연녹색

        - border :주황색

        - margin : 연주황색

 

'Networks > HTML & CSS & JS' 카테고리의 다른 글

SK networks AI Camp - Javascript  (0) 2024.08.01
SK networks AI Camp - CSS_flex  (0) 2024.07.31
SK networks AI Camp - HTML(tag)  (0) 2024.07.31
SK networks AI Camp - HTML(기본 설명)  (0) 2024.07.31
SK networks AI Camp - CSS_Select the plates 정답(17 ~ 32번)  (2) 2024.07.23

'Networks/HTML & CSS & JS'의 다른글

  • 현재글SK networks AI Camp - CSS기능

관련글

티스토리툴바