[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 5일차 - CSS

CSS란?
CSS 작성방법
CSS Selector
CSS 우선 적용 순위
CSS 레이아웃 - 위치속성
느낀 점

728x90

CSS란?

Cascading Style Sheets의 약자이며 한 번에 여러 웹 페이지의 레이아웃을 제어가능
외부 스타일 시트는 css 파일에 저장된다. CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용(Cascading) 연속화 형태로 위에서 아래로 적용

CSS 작성방법

Selector(선택기)는 스타일을 지정할 HTML 요소를 말하며, 각 선언에는 콜론으로 구분된 css 속성 이름과 값이 포함. 여러 css 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶임

CSS Selector

CSS 선택기는 스타일을 지정할 HTML 요소를 찾는(또는 선택하는)데 사용

p{
text-align : center;
color: red;
}
/* 요소 이름을 기반으로 html 요소를 선택 */



#para1{
text-align : center;
color: red;
}
/*
id 선택자는 HTML 요소의 id 속성을 사용
요소의 id는 페이지 내에서 고유하므로 id선택기는 하나의 고유한 요소를 선택
id값은 #(해시)문자 뒤에 요소의 id 사용.
*/



.center{
text-align : center;
color: red;
}
/*
특정 클래스는 요소를 선택하면 .(마침표)문자와 클래스 이름을 사용
*/

h1{
text-align:center;
color:red;
}

h2{
text-align:center;
color:red;
}

p{
text-align:center;
color:red;
}


/* */

h1, h2, p {
text-align: center;
color:red;
}

코드를 최소화 하려면 선택기를 그룹화. 그룹화하려면 각 선택기를 쉼표(,)로 구분

CSS 우선 적용 순위

같은 요소에 따른 CSS 속성이 중복 설정되어 있을 때, 우선 적용되는 순서

우선순위 1 - 속성값 뒤어 !important가 붙어 있는 속성
우선순위 2 - 인라인 스타일로 적용되어 있는 속성
우선순위 3 - 선택자에 id가 쓰인 속성
우선순위 4 - class, attribute, pseudo-class로 지정한 속성
우선순위 5 - 태그 이름으로 지정한 속성
우선순위 6 - 부모 요소에 의해 상속된 속성

CSS 레이아웃 - 위치속성

이 position 속성은 요소에 사용되는 위치 지정 방법의 유형(정적, 상대, 고정, 절대 또는 고정)을 지정

position(위치속성)은 요소에 사용되는 위치 지정 방법의 유형을 지정

static
relative
fixed
absolute
sticky

CSS 레이아웃 - Static

HTML 요소는 기본적을 정적으로 배치. 정적으로 배치된 요소는 top, bottom, left 및 right 속성의 영향을 받지 않음.

div.static{
position:static;
border: 3px solid #ddd;
}

CSS 레이아웃 - relative

정상 위치를 기준으로 배치, 상대적으로 배치된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 원래 위치에서 벗어나 조정.
다른 콘텐츠는 요소가 남긴 간격에 맞게 조정되지 않음.

div.relative{
position:relative;
left:30px;
border:3px solid #ddd;
}

CSS 레이아웃 - absolute

가장 가까운 위치에 있는 조상을 기준으로 위치가 지정. 하지만, 절대 위치 지정 요소에 위치 지정 조상이 없으면 문서 본문을 사용하고 있는 페이지 스크롤과 함께 이동.

div.relative{
position:relative;
left:30px;
border:3px solid #ddd;
}

div.absolute {
position:absolute;
top:80px;
right:0;
height:100px;
border:3px solid #ddd;
}

CSS Pseudo-class Selector

Selector	예제	설명
:active	a:active	활성 링크를 선택
:hover	a:hover	마우스 오버가 되는 링크를 선택
:visited	a:visited	방문한 모든 링크 선택
:first-child	p:first-child	부모의 첫 번째 자식인 모든 <p> 요소를 선택
:nth-child(n)	p:nth-child(2)	부모의 두 번째 자식인 모든 <p> 모소를 선택

<!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">
  <title>CSS</title>
</head>
<body>

    <style>
      p{
        border: 2px solid red;
        margin-bottom: 20px;
        padding: 10px;
        text-align: center;
      }


      p:nth-child(3){
        border-radius: 6px;
      }

      p:nth-child(4){
        border-radius: 14px;
      }

      p:nth-child(5){
        border-radius: 50px;
      }

      .container{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 1px solid black;
      }

      .container div{
        background-color: brown;
        color:wheat;
        padding: 10px;
      }

      .container_img{
        width: 1000px;
        height: 1000px;
        background-image: url("https://i.pinimg.com/474x/3d/b7/e7/3db7e7c529c00ceef37337882ac17b0f.jpg");
        background-size: cover;
        background: linear-gradient(to bottom, #333, #f37474 75%);
      }

    </style>
  
  <div>
    <p>일반 테두리</p>
    <p>둥근 테두리</p>
    <p>더 둥근 테두리</p>
    <p>가장 둥근 테두리</p>
  </div>


  <div class="container">
    <div>아이템1</div>
    <div>아이템2</div>
    <div>아이템3</div>
  </div>


  <div class="container_img">
 
  </div>

</body>
</html>

Grid와 Flex의 차이점

flex는 1차원 적인 부분만 고려한 레이아웃이며 한 방향으로 정렬가능
grid는 공간을 나눠 정렬 가능

Flex 방향설정

flex-direction : row / row-reverse / column / column-reverse

Flex 정렬

(가로정렬) justify-content :

<!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">
  <title>실습3 css</title>
  <script src="https://kit.fontawesome.com/85f067b64a.js" crossorigin="anonymous"></script>
  <style>

    *{
      margin:0;
    }

    a{
      text-decoration: none;
      font-size: 0.8rem;
      color:#333;
    }
    .wrapper {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      padding:20px;
      position: sticky;
      top:0;
      z-index: 999;
      background-color:#fff;
    }

    .wrapper > div{
      font-weight: 700;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      text-align: center;
      }

    .wrapper img{
    max-width: 100%;
    height: auto;
    width: 5rem;
    }

    .item:nth-child(1) {
    grid-column: 1 / 3;
    }

    .edu-items{
    margin: 0;
    display: flex;
    flex-direction: row;
    }

    .edu-item{
    width: 320px;
    border: 1px solid #ddd;
    }

    img{
    max-width: 100%;
    height: auto;
    }


    .wrap_edu{
      margin: 10px;
    }

    .edu-item-img{
    position: relative;
    overflow: hidden;
    }

    .edu-item-img span{
    position: absolute;
    top:10%;
    right:5%;
    font-size: 0.4rem;
    padding: 5px 10px;
    }

    .edu-item-img img:hover{
    transform: scale(1.2);
    }

    .edu-item-tag{
    margin-top: auto;
    font-size: 0.7rem;
    padding: 5px 10px;
    }

    .edu-item-title{
      font-weight: 700;
      margin-top: 20px;
    }

    .edu-item-context{
      font-size: 0.75rem;
      color: #a3a3a3;
      margin-top: 10px;
    }

    .edu-item-tag-num{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }

    .edu-item-btn{
      text-align: center;
      margin: 20px 10px;
      padding: 15px 10px;
      background-color: aquamarine;
      border-radius: 20px;
    }

    .radi{
      background-color: #ddd;
      border-radius: 20px;

    }

  </style>
</head>
<body style="height: 1000px">
  <div class="wrapper">
    <div class="item"><a href="#"><img src="https://sniperfactory.com/img/sfac.svg" alt=""></a></div>
    <div class="item"><a href="#">스픽소개</a></div>
    <div class="item"><a href="#">교육과정</a></div>
    <div class="item"><a href="#">공지사항</a></div>
    <div class="item"><a href="#">수료생 커뮤니티</a></div>
    <div class="item"><a href="#">협력사</a></div>
    <div class="item"><a href="#">스픽블로그</a></div>
  </div>

  <section>
    <h3>교육과정</h3>
    <div class="edu-items">
        <div class="edu-item">
            <p class="edu-item-img"><img src="https://sniperfactory.com/api/files/courses/2g41rrrm5lttkl0/flutter3rd_qdbQ03hu4U.png" alt=""> <span class="radi">스팩</span></p>
            <div class="wrap_edu">
              <span class="edu-item-tag radi">신청가능</span>
              <p class="edu-item-title">Flutter 모바일 어플리케이션 개발 부트</p>
              <p class="edu-item-context">
                4개월 간 스나이퍼팩토리와 함께 Flutter로 "내가 원하는 어플리케이션"을 만들어보는 시간입니다.
                Flutter와 Dart의 기초부터 심화, 응용까지 배워보고 나만의 어플리케이션으로 포트폴리오를 쌓아보세요.
                최종적으로 기업의 실제 프로젝트까지 직접 진행할 수 있는 만큼의 개발자로 성장하세요!
              </p>

              <div class="edu-item-tag-num">
                <p class="edu-item-tag radi">취업연계과정</p>
                <p class="edu-item-tag">기수 : 3기 <i class="fa-solid fa-rocket"></i></p>
              </div>
            </div>
            <p class="edu-item-btn">
              더 알아보기
            </p>
        </div>


        <div class="edu-item">
          <p class="edu-item-img"><img src="https://sniperfactory.com/api/files/courses/2g41rrrm5lttkl0/flutter3rd_qdbQ03hu4U.png" alt=""> <span class="radi">스팩</span></p>
          <div class="wrap_edu">
            <span class="edu-item-tag radi">신청가능</span>
            <p class="edu-item-title">Flutter 모바일 어플리케이션 개발 부트</p>
            <p class="edu-item-context">
              4개월 간 스나이퍼팩토리와 함께 Flutter로 "내가 원하는 어플리케이션"을 만들어보는 시간입니다.
              Flutter와 Dart의 기초부터 심화, 응용까지 배워보고 나만의 어플리케이션으로 포트폴리오를 쌓아보세요.
              최종적으로 기업의 실제 프로젝트까지 직접 진행할 수 있는 만큼의 개발자로 성장하세요!
            </p>

            <div class="edu-item-tag-num">
              <p class="edu-item-tag radi">취업연계과정</p>
              <p class="edu-item-tag">기수 : 3기 <i class="fa-solid fa-rocket"></i></p>
            </div>
          </div>

          <p class="edu-item-btn">
            더 알아보기
          </p>
      </div>

      <div class="edu-item">
        <p class="edu-item-img"><img src="https://sniperfactory.com/api/files/courses/2g41rrrm5lttkl0/flutter3rd_qdbQ03hu4U.png" alt=""> <span class="radi">스팩</span></p>
        <div class="wrap_edu">
          <span class="edu-item-tag radi">신청가능</span>
          <p class="edu-item-title">Flutter 모바일 어플리케이션 개발 부트</p>
          <p class="edu-item-context">
            4개월 간 스나이퍼팩토리와 함께 Flutter로 "내가 원하는 어플리케이션"을 만들어보는 시간입니다.
            Flutter와 Dart의 기초부터 심화, 응용까지 배워보고 나만의 어플리케이션으로 포트폴리오를 쌓아보세요.
            최종적으로 기업의 실제 프로젝트까지 직접 진행할 수 있는 만큼의 개발자로 성장하세요!
          </p>

          <div class="edu-item-tag-num">
            <p class="edu-item-tag radi">취업연계과정</p>
            <p class="edu-item-tag">기수 : 3기 <i class="fa-solid fa-rocket"></i></p>
          </div>
        </div>
        <p class="edu-item-btn">
          더 알아보기
        </p>
    </div>


    </div>
  </section>
</body>
</html>

출처 : https://velog.io/@ikkim01/CSS-Flex-VS-Grid

느낀 점

예전에 css코딩할 때 태그 하나하나 스타일주고 했었는데 시간도 많이 소요되고 너무 많다 보니 헷갈리기도 했는데, 다양한 css 규칙들을 활용해서 더욱더 간편하게 할 수 있는 방법들이 있다는 것을 배웠다.

* 유데미 큐레이션 바로가기 : https://bit.ly/3ZpMIP7
* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

728x90

저작자표시 비영리 변경금지 (새창열림)

'10주완성 프로젝트 캠프' 카테고리의 다른 글

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 과제 (0)	2023.06.26
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - 리액트 (0)	2023.06.22
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 4일차 - HTML (0)	2023.06.20
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 3일차 - 서비스기획3 (0)	2023.06.11
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 2일차 - 서비스기획2 (0)	2023.06.08

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 5일차 - CSS

CSS란?

CSS 작성방법

CSS Selector

CSS 우선 적용 순위

CSS 레이아웃 - 위치속성

CSS 레이아웃 - Static

CSS 레이아웃 - relative

CSS 레이아웃 - absolute

CSS Pseudo-class Selector

Grid와 Flex의 차이점

느낀 점

'10주완성 프로젝트 캠프' 카테고리의 다른 글

CSS란?

CSS 작성방법

CSS Selector

CSS 우선 적용 순위

CSS 레이아웃 - 위치속성

CSS 레이아웃 - Static

CSS 레이아웃 - relative

CSS 레이아웃 - absolute

CSS Pseudo-class Selector

Grid와 Flex의 차이점

느낀 점

'10주완성 프로젝트 캠프' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역