[SeSAC x 코딩온] CSS (작성방식, 우선순위, 선택자, 박스모델)

타다닥·2023년 9월 17일
CSS

html, css

목록 보기
2/3
post-thumbnail

오늘 정리 할 내용은 CSS !

html을 하고 css까지 왔다.
강의시간동안 내 집중력은 아직 부족하다. 후반으로 갈 수록 동공이 흔들리고 머리가 가벼워지려한다.

그래도 나름 복습을 하고 정리를 하는데에는 익숙해져간다.
걱정도 많지만 재미도 있다. 근데 한 번에 못따라하면 괜히 쪼들린다.

벨로그는 뭔가..아직도 낯설기는 하다.
개인적으로 노션을 아주 잘 사용하고 있는데 노션 복붙이 잘 되는 듯 하면서 안되는 듯해서 쪼끔 불편하다.

🗒

CSS ?

  • Cascading Style Sheet. 웹 페이지를 디자인하기 위해 사용한다.
  • CSS에서의 주석은 /* 여기에 내용 */ 이러한 형태로 사용한다.

💡 <body>태그는 <head>태그가 읽히지 않으면 안읽힌다. 그래서 <body> 전에 <style>태그를 입력해주어야한다. 또한 <head>에 많은 내용이 적혀있으면 웹사이트의 로딩이 길어진다.

css는 총 3가지 방식으로 작성된다.

  • 1) 인라인방식
    • 각 요소에 각각 스타일을 적어줘야 한다. 귀찮고 불편하다. 코드도 길어진다. 재사용도 불가능.
    • 이미 사용한 동일한 스타일을 사용하려면 또 코드를 복붙해줘야한다.
  • 2) 내장 방식
    • <head> </head>사이에 적어준다.
    • html문서 내에서 <style>태그를 만들어서 스타일을 지정하는 문법을 한 곳으로 빼준다.
    • 한 공간에 묶어둘 수 있어서 편리하다.
  • 3) 링크 방식
    • 별도로 css 파일을 만들어주고 해당 파일에 태그를 입력해준다. (문서형식은 .css)
    • 그럼 이 파일을 불러와서 html에 적용을 시키면 된다.
    • 불러올때는 <link>태그 로 불러온다. 아래 형식! <link rel="stylesheet" href="./css/css_1.css">
    • rel속성은 relationship의 약자이다. html과 연결된 파일이 어떤 관계인지를 나타내는 것! rel이 이상하게 기억에 안남아서 찾아보았다. (추가로 href 는 hyper reference의 약자로 '하이퍼 참조'를 의미한다.

CSS의 우선 순위

  • 그렇다면 이 3가지 방식이 겹칠 때 우선순위는?
    • 인라인방식이 제일 우선 읽힌다. 기본적으로 가장 늦게 읽히는 것이 우선으로 적용된다.
    • 특정 속성에 !important; 를 입력해주면 우선수위 상관없이 무조건 1순위가 된다.
    • 동일한 선택자를 이용하여 요소를 선택했을 경우, 뒤에 작성한 것으로 반영 (내장, 링크 방식은 늦게 쓰여진 것이 우선이다.)
    • 다른 선택자를 이용하여, 같은 요소를 선택했을 경우, 아래 우선순위에 따라 반영
    • !important > 인라인 스타일 > 아이디 선택자> 복합 선택자>클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자

CSS의 선택자(Selector), 속성(Property), 값(Value)

p { color: red; padding: 5px;}
  • CSS의 선택자(Selector)
    • 앞에 있는 p 가 선택자이다.
    • html의 어떤 요소에 스타일을 적용할지 선택해주는 것!
    • 스타일을 적용하고자 하는 곳을 입력해주면 된다.
  • CSS의 속성(Property)
    • color 와 padding 이 속성이다. 속성과 속성값은 { } 안에 입력해준다.
    • 원하는 속성값을 선택해서 다양한 스타일을 적용할 수 있다.
    • 여러개의 속성을 사용할 수 있고 세미콜론(;)으로 구분한다.
    • 속성은 표준으로 지정되어있다. 내맘대로 만들 수 없다.
  • CSS의 값(Value)
    • 원하는 속성을 선택했다면, 속성의 디테일한 값을 입력해준다. 크기 단위 색상 단위 등.

1️⃣ CSS의 선택자 - 단일 선택자

  • 전체 선택자
    • 모든 요소에 스타일을 적용하겠다. * {속성: 속성값;}
    • 전체 선택자로 스타일을 적용했더라도 이후에 또다른 스타일 값을 적용하면? 그것도 반영이 된다. 늦게 쓰여진 것이 우선이니까! (예를 들어 1.전체선택자로 배경을 회색으로 만들어버리고 2.특정 부분 배경을 파란색으로 설정했다면? 전체 배경은 회색, 특정 부분만 파란색으로 보여진다!)
  • 태그 선택자
    • 태그의 이름을 적고, 해당 태그에 스타일을 적용하겠다.
    • div {속성: 속성값;} 이렇게 하면 <div>태그 가 사용된 곳에스타일을 적용하겠다는 것.
  • Class 선택자

    • 특정한 클래스에 스타일을 적용하겠다. .classname {속성: 속성값;} 의 형태이다.

    • 클래스이름 앞에 .을 붙여준다. html파일에서 class를 지정하는 것도 잊지말자.

      <!--html파일에선 이렇게 하고-->
<p class="orange">클래스 선택자</p>
      /*css파일에선 이렇게 작성해준다.*/
.orane {
    color: orange;
}

    • class는 여러개 지정 할 수도 있다.

      <p class="orange bg-red">p.orange hello</p>

      .orange 와 .bg-red . 이렇게 2개의 class를 지정 할 수 있다. css에서도 적용 가능!

  • ID 선택자

    • 특정한 id를 가진 곳에 스타일을 적용하겠다. #id {속성: 속성값;} 의 형태이다.

    • id 속성값 앞에 # 을 붙여준다.

      <!--html파일에선 이렇게 하고-->
<p id="first">아이디 선택자</p>
      /*css파일에선 이렇게 작성해준다.*/
#first {
    color: orange;
}

💡 <p>, <div>와 같이 기본적인 태그에 스타일적용은 좋지 않다. 자주 사용되기 때문에 중복될 수 있고 헷갈릴 수 있다. 그러니 특정시킬 수 있는 id 나 class를 지정하고 선택자를 사용하는 것이 좋다!

2️⃣ CSS의 선택자 - 복합 선택자 (기본 선택자만으로 선택이 불가능 할 때 사용)

  • 하위 선택자
    • 특정 선택자 기준으로 하위에 있는 것만 선택
    • div .orange {속성: 속성값;} 의 형태이다.
    • <div> 태그 안에 있으면서, class 속성값이 orange인 곳에 스타일을 적용하겠다. (<div> 태그 밖에 class=orange 있더라도 적용 안된다.)
    • 공백주의! ‘띄어쓰기’가 선택자의 기호이다! (하위에 있는 걸 선택하겠다는)
      <div>
      <ul>
          <li>사과</li>
          <li>딸기</li>
          <li class="orange">div안에 있는 오렌지</li>
      </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">div 안에 있는 오렌지2</span>
    </div>
    <span class="orange"> 그냥 span태그 오렌지</span>
    <div>
    <p id="apple">아이디가 애플</p>
</div>


      div .orange {
    color: red;
}

div #apple {
    background-color: red;
}
  • 자식 선택자 (>)

    • 특정 선택자 기준으로 자식 요소를 선택하겠다.

    • ul > .orange {속성: 속성값;} 의 형태이다.

    • ul 태그의 자식요소인, class="orange"인 곳에 스타일을 적용하겠다.

      💡 ‘하위선택자’는 하위에 있다는 전부 스타일을 적용시킨다. ‘자식선택자’는 자식요소만 선택해서 스타일을 적용시킨다!

  • 인접 형제 선택자 (+)
    • 가장 가까이 있는 형제를 선택하겠다. (앞의 요소 바로 뒤에 있는 요소만 선택!) 부모,자식과는 다르다. 위아래 말고 같은 선상에 있는 형제들로 생각! (링크 참고)
    • h1 + p {속성: 속성값;} 과 같은 형태이다. <h1>바로 뒤에 있는 <p>에 스타일을 적용하겠다.
  • 일반 형제 선택자 (~)
    • 앞 요소 뒤에 있는 모든 요소(형제들!)들을 선택하겠다.
    • h1 ~ ul {속성: 속성값;} 과 같은 형태이다. <h1>바로 뒤에 있는 <ul>에 전체에 스타일을 적용하겠다.
    • 그럼 html문서에 <ul>이 있다면 전부 스타일이 적용될까? 동일한 형제선상에 있다면 전체에 적용이 된다! 하지만 예를 들어 <div>태그 안에 <ul>이 들어가 있다면 해당 부분은 적용이 되지 않는다. 동일한 선상이 아니기 때문. 상위에 있는 <div>태그를 풀어주면 적용이 된다.

3️⃣ CSS의 선택자 - 가상 클래스 선택자

  • 가상 상황에 따라 어떤 요소를 선택했을 때, 어떻게 보여질 것인지 스타일을 적용한다.
  • hover (사용자 행동에 따른 변화)
    • 선택자 요소에 마우스 커서가 올라가있을 때 스타일이 적용되게 한다.
    • a:hover {속성: 속성값;} 의 형태이다. <a>에 hover 스타일을 적용하겠다.
  • active (사용자 행동에 따른 변화)
    • 선택자 요소를 클릭하고있는 동안 스타일이 적용된다.
    • p:hover {속성: 속성값;} 의 형태이다. <p>에 active 스타일을 적용하겠다.
  • focus (사용자 행동에 따른 변화)
    • 선택자 요소가 포커스 되면 스타일을 적용하겠다.
    • input:focus {속성: 속성값:}의 형태이다. 여러가지 <input>태그가있을 때 해당 태그에 포커스가 되었을 때 스타일을 적용시켜준다.
  • visited (사용자 행동에 따른 변화)
    • 사용자가 링크를 방문하고 났을 때 적용되는 스타일.
    • a:visited {속성: 속성값:}의 형태이다.
  • first-child (요소의 상황에 따른 변화)
    • 선택자가 형제요소중 첫번째라면 스타일을 적용하겠다.
    • .fruits span:first-child {속성: 속성값;} 의 형태이다.
    • 해석 주의필요! 그대로 해석하지 않는다. class="fruits"에서 first-child(첫번째 하위요소)가 <span> 이라면 스타일을 적용하겠다는 의미이다.
  • last-child (요소의 상황에 따른 변화)
    • 선택자가 형제요소중 마지막(막내)라면 스타일을 적용하겠다.
    • .fruits h3:last-child {속성: 속성값;} 의 형태이다.
    • 해석 주의! class="fruits"에서 last-child(마지막 하위요소)가 <h3> 이라면 스타일을 적용하겠다는 의미이다.
  • nth-child(n) (요소의 상황에 따른 변화)
    • 선택자가 형제요소 중 (n)번째라면 스타일을 적용하겠다.
    • .zoo *:nth-child(2) {속성: 속성값;} 의 형태이다. class=”zoo”에서 *(전체)중에 (2)번째인 요소에 스타일을 적용하겠다는 의미.
    • child(2)는 두번째 마다 선택. 짝수단위로 보면 된다.
    • child(2n+1)는 첫번째 요소부터 2번째마다 선택. 홀수단위로 보면 된다.
  • not (부정 선택)
    • 선택자가 아닌 요소에 스타일을 적용하겠다.
    • .zoo *:not(span) {속성: 속성값;} 의 형태이다. class=”zoo”에서 *(전체)중에 (span)이 아닌 요소에 스타일을 적용하겠다는 의미.

4️⃣ CSS 선택자 – 가상 요소 선택자

  • 선택 된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자이다.
  • 꼭 content라는 속성을 사용해야 하며, 빈 값(””)이라도 넣어줘야 적용이 된다.
  • 실제로 의미 없는 html태그를 만들지 않고도 요소의 삽입이 가능하여 자주 사용된다고 한다. 쇼핑몰 메뉴나 상품명 앞에 ‘hot’, ‘best’와 같은 문구를 추가하는 경우를 예로 들 수 있다.
  • before (요소의 앞에 내용을 삽입)
    • .zoo::before {content: “앞”;} 의 형태이다. 기존 내용 앞에 “앞”이라는 문구가 추가되어서 보여진다.
  • after (요소의 뒤에 내용을 삽입)
    • .zoo::after {content: “뒤”;} 의 형태이다. 기존 내용 뒤에 “뒤”이라는 문구가 추가되어서 보여진다.

5️⃣ CSS 선택자 – 속성 선택자 (특정한 속성을 가진 태그를 선택)

  • [속성]
    • 특정한 속성을 가지고 있는 태그에 스타일을 적용하겠다.
    • [속성] {속성: 속성값;} 의 형태이다.
  • [속성=”속성값”]

    • 특정한 속성과 속성의 값을 지정해서 스타일을 적용하겠다.

    • [속성="속성값"] {속성: 속성값;} 의 형태이다.

    • 아래와 같이 쓸 수 있다. <input> 인데 type=”text” 인 속성을 가지고 있는 곳에 스타일을 적용하겠다는 의미이다.

      input[type=text] {
background-color: aquamarine;
}

CSS 박스모델

1️⃣ box-sizing 속성

  • content-box
    • 콘텐츠 영역을 기준으로 크기를 정한다. (기본값)
    • 콘텐츠 자체 크기가 200이라면 그냥 200인거.
  • border-box
    • 테두리를 기준으로 크기를 정한다. (content + padding + border)
    • paddig까지 포함한 크기가 200인거.

💡 개발 초기 단계에서 속성 값을 정하고 가야 한다! 누구는 content-box, 누구는 border-box로 하면 꼬인다.

  • margin
    • 윤곽선 기준으로 외부의 여백 (border기준)
    • magin은 숫자로 값을 표시해준다.
    • 20px 한 번 적으면 상하좌우 모두 동일하게 20px.
    • 20px 20px 두번 적으면 상하20px, 좌우20px.
    • 20px 40px 20px 40px 네번 적으면 위-오른쪽-아래-왼쪽의 사이즈를 지정한다.(시계방향)
  • padding
    • 윤곽선 기준으로 안쪽여백을 의미한다.

💬

  • html을 하고 css를 배우니 낯선느낌이 덜 해서 좋다. 그리고 재미있었다.
  • 간단한 기본 개념만 배워서 실제로 적응하기에는 조금 더딘 부분이 있다. 기본 개념은 꼭 외우도록 해보고 연습해가면서 더 적응해보아야 겠다.
    -강의하면서 실습한 내용은 집에와서 나 혼자 꼭 다시 해봐야겠다! 이전에도 적었지만 실습시간에는 괜히 마음이 조급해져서 '내가 제대로 이해했는지'에 대한 이해 없이 급하게 해버리게된다. 그리고 막히는 부분이 있으면 다른분들이 올린 내용을 참고해서 '아 이부분이 이렇게 되어야하는구나' 하면서 해결하기도 한다. 그런데 결국 이렇게 내가 모르는부분을 온전히 이해하려면 나 혼자 해결해나가야한다. 나 혼자 하면서 이해하는 시간을 꼭 가져야겠다.

✏️

아직까지 내 집중력이 모자란다. 이것도 적응이 되면 될 것 같기는 하다. 근데 이제 앞으로는 더 어려운 내용들을 배우고 익혀야할텐데 그때까지 내 집중력이 올라오길 바란다. ㅠ

profile
타다닥
프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆
이전 포스트

[SeSAC x 코딩온] HTML

다음 포스트

[SeSAC x 코딩온] CSS (Position속성, Transform속성, Transition속성, Display속성, CSS Flex)

0개의 댓글