📌 고정 게시글

📢 공지합니다

이 게시글은 메인 페이지에 항상 고정되어 표시됩니다.

최코딩의 개발

CSS 기초편(3) 본문

HTML,CSS,JS

CSS 기초편(3)

seung_ho_choi.s 2023. 5. 16. 23:16
728x90

개요: 필자가 클론코딩을 공부하면서 정리한 게시물이다.

 

position  

레이아웃보다는 위치를 아주 조금 위로 오른쪽으로 옮기고 싶을 때 사용

 

fixed

 

 div {

        color:blue;

        width:300px;

        height:300px;

        background-color:teal;

      }

      #different {

        position:fixed;

        background-color:wheat;

        width:350px;

      }

    </style>

  </head>

  <body>

    <div></div>

    <div id="different"></div>

이렇게 하면 스클롤을 내렸을시 화면상에 wheat박스는 그대로 고정되있는다.

    #different {

        top:5px;

        position:fixed;

        background-color:wheat;

        width:350px;

      }

 

이렇게 하면 wheat박스는 teal 박스 위로 가게 된다. 레이어가 구분되는 것을 쉽게 확인할 수 있다.

position: static(디폴트값임 그냥) : 레이아웃이 박스를 처음 위치하는 곳에 두는 것

position: relative: 처음 생성된 위치를 기준점으로 상하좌우의 위치를 조금씩 수정

.green {

        background-color:teal;

        height:100px;

        position:relative;

        top:-10px;

        width:100px;

      }

    </style>

  </head>

  <body>

    <div>

      <div class="green"></div>

 
 

다음과 같이 relative 사용시 저렇게 된다.

 

position: absolute

 .green {

        background-color:teal;

        height:100px;

        position:absolute;

        bottom:0px;

        width:100px;

      }

 

다음과 같이 사용시 화면 맨 끝부분쪽 기준으로 움직인다.

즉 이것는 가장 가까운 relative 부모를 기준으로 이동시켜준다.

저것의 부모는 div가 아닌 body이다.

div {

        color:blue;

        width:300px;

        height:300px;

        background-color:wheat;

        position:relative;

      }

      .green {

        background-color:teal;

        height:100px;

        position:absolute;

        right:0px;

        width:100px;

      }

 

divrelative 부모로 설정해서 다음과 같이 변환시켰다.

pseudo selector

 
좀 더 세부적으로 엘리먼트를 선택해주는 것

div {
      div {
        width: 300px;
        height: 300px;
        background-color: wheat;
        position: relative;
      }
      div:last-child {
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>

다음과 같이하면 아래 div 색깔만 teal로 변경된다. 

 div:first-child{
        background-color: tomato;
      }

이렇게 하면 첫번째 색도 변경된다.

다음과 같이 변경된다. 

  span:nth-child(2) {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
 

span은 다음과 같다. 이렇게 하면 2번째 배경색 변경! 

span:nth-child(even) {
        background-color: aqua;
      }

하면 짝수번째만 색이 변경된다. 홀수는 odd, 3개씩해서 바꾸고 싶으면 3n+1을 하면 된다. 

 

  span {
        color: tomato;
      }
      p span {
        color: teal;
      }
    </style>
  </head>
  <body>
    <div>
      <span>hello</span>
      <p>
        seung ho is very big and good
        <span>but short</span>
      </p>

<p> 안에 있는 span 색을 변경하고 싶으면 다음과 같이 p를 부모에 두고 작성하면 된다. 

     span {
        color: tomato;
      }
      p span {
        color: teal;
      }
      div > span {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div>
      <span>hello</span>
      <p>
        seung ho is very big and good
        <span>but short</span>
      </p>
    </div>

다음과 같이 div > span 을 했을시 div 바로 아래 span만 밑줄적용이 된다. 따라서 다음과 같이뜬다. 

p + span {
        font-size: 50px;
      }

이렇게 하면 p의 다음 형제에다가 적용할 수 있다. 

 

combinator

 p ~ span {
        font-size: 50px;
      }

p뒤에 span이 오지 않을 우 적용하기 위해 쓰인다. 

 

input {
        border: 1px solid wheat;
      }

      input:required {
        border-color: tomato;
      }
    </style>
  </head>
  <body>
    <div>
      <form>
        <input type="text" placeholder="username" />
        <input type="password" required placeholder="password" />
      </form>

다음과 같이 수정을 할 수 있다. 

 input[type="password"] {
        background-color: thistle;
      }

이렇게 하면 password의 배경색이 바뀐다. 

input[type="password"] {
        background-color: thistle;
      }
      input[placeholder~="name"] {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div>
      <form>
        <input type="text" placeholder="user name" />
        <input type="text" placeholder="user.2 name" />
        <input type="password" required placeholder="password" />
      </form>
 

~를 써서 적용시킬 수 있다. 

$: 처음

^: 끝

 

state

  button:active {
        background-color: tomato;
      }

버튼을 누를 때 토마토 색으로 바뀐다. 

 button:hover {
        background-color: tomato;
      }

마우스를 올릴 때 색이 바뀐다. 

button:focus {
        background-color: tomato;
      }

키보드를 선택했을때 색이 바뀐다. 

a:visited {
        color: tomato;
      }
.
.
.

링크를 방문하면 hfasdfi 색이 바뀐다. 

 

  form {
        border: 1px solid tomato;
        display: flex;
        flex-direction: column;
      }
      form:focus-within {
        border-color: seagreen;
      }

입력창을 누르면 seagreen으로 색이 바뀐다.   form은 그 자식들인 input이 focuse가 되면 form의 모습을

바꾼다는 것이다.. ?? 여기는 좀 이해부족... (3.17 6분이후 보기)

 

  input::placeholder {
        color: yellow;
      }

placeholder 부분이 노란색이 된다.

 

p::selection {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" placeholder="Name" />
    </form>
    <p>choi seung ho</p>

selection을 하면 <p> 부분을 드래그 하면 해당 색이 나온다. 

p::first-letter {
        color: aqua;
      }

이거 또는 first-line을 통해 첫번째 글자를 조정할 수 있다. 

   p {
        background-color: rgb(2, 2, 2, 0.5);
      }

다음과 같이 rgb방식으로 색을 지정해 투명도 까지 변경할 수 있다. 

 

:root {
        --main-color: #fcce00;
      }
 
   p {
        background-color: var(--main-color);
      }
      a {
        background-color: var(--main-color);
      }

root로 색을 지정하고 변수를 통해 설정할 수 있다. 즉 같은색일때 여러번 안쓰고 한곳에 지정하고 쓰기 가능하다!!

:root {
        --main-color: #fcce00;
        --default-border: 1px solid var(var(--main-color));
      }

border도 지정가능!!

728x90

'HTML,CSS,JS' 카테고리의 다른 글

JS 기초편(1)  (0) 2023.06.25
CSS 기초편(4)  (0) 2023.05.17
CSS 기초편(2)  (0) 2023.05.09
CSS 기초편(1)  (3) 2023.05.09
HTML 기초편(3)  (0) 2023.05.05