거북이개발자

[카카오톡 클론코딩]CSS 기초 문법(2) 본문

Web/HTML & CSS

[카카오톡 클론코딩]CSS 기초 문법(2)

류정식 2021. 1. 5. 13:06

0. 학습한것

CSS로 위치선정, 그리고 여러 선택법등을 배웠다.

 

1. flex

앞서 배운것 처럼 block형은 줄넘김이 기본적으로 된다. 이러한 방법을 해결하기위해서

flex를 사용할 수 있다.

 

(1)일반적 blcok형을 쓸떄

  <style>  
      
      div{
       
        width: 50pt;
        height:50pt;
        background-color: yellowgreen;

      }
    </style>
 
    
        <body>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          
          

        </body>

이런식으로 줄바꾼이 나온다.

 

(2) flex형 적용시

아래 코드처러 flex를 적용할 수 있다.

  body{
        display : flex;
        justify-content: center; 
        align-items: center;
      }

ㅇ

이와 같이 할수 있다. 또한 flex에서 여러 부가적 엘리먼트를 사용가능하다.

flex-direction : 주축을 바꾼다.

position: fixed : 스크롤내려도 항상 그위치에 위치시킨다.

position: absolute : relative 부모를 찾아 열을 맞춘다.

 

2. 태그 선택적 적용 (id, class, pseudo selectors)

CSS이용시 이름이 같은 모든 태그에 CSS가 적용되서 이걸 따로따로 적용시키고 싶을 수 있다.

이때 id, class, pseudo selector을 이용하면 된다.

 

(1)id

태그에 특정 id를 설정해서 id를 이용하여 그 태그를 CSS를 적용시킬 수 있다.

단 id는 유일성을 만족해야한다.

 #을 이용하여 사용가능하다.

 #first{
            background-color: whitesmoke;
        }
   
   
   <div id="first"></div>

 

(2)class

id와 용도는 비슷하지만 class는 id와 다르게 N:N으로 여러 태그에 중복해서 사용가능하다.

 . 을 이용하여 사용 가능하다.

.tomato{
          background-color: tomato;
      }
      
 <div class="tomato"><div>
 <div class="tomato"><div>
 <div class="tomato"><div>

 

 

(3)pseudo selector

pseudo selector을 사용하면 기존의 id, class보다 좀더 정밀하게 CSS를 적용할 수 있다.

 

 

저작자표시

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

[카카오톡 클론코딩]CSS 고급 문법  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(3)  (0) 2021.01.05
[카카오톡 클론코딩]CSS 기초 문법(1)  (0) 2021.01.04
[카카오톡 클론코딩]HTML 기초 문법  (0) 2021.01.03
[카카오톡 클론코딩]HTML, CSS, JAVASCRIPT 란?  (0) 2021.01.02
'Web/HTML & CSS' Related Articles more
Comments