PlayData 백엔드 부트캠프 Start 17일차 - CSS

CSS 정리 사실 백엔드에 대한 관심이 있어 프론트엔드는 대충해도 될지 알았는데 생각보다 재밌어서 당황...

이것저것 해보다가 이제야 금요일 수업을 포스팅 합니다. 

전에 2가지 백준 문제 풀이하고 시작하겠습니다. 

 

1. 백준 3046번 문제 - Bronze4

import java.util.Scanner;

public class Main {
/*    두 숫자 R1과 R2가 있을 때, 두 수의 평균 S는 (R1+R2)/2와 같다. 상근이는 정인이 생일 선물로 두 숫자 R1과 R2를 주려고 한다. 생일 파티에서 상근이는 정인이에게 이 두 숫자를 말해주고, 정인이는 이 숫자를 받아 적는다. 그리고 나서 기쁜 마음으로 1년동안 이 숫자를 외우면서 산다.
    상근이는 R1과 R2를 엄청난 고민 끝에 정했다. 작년에는 R1과 R2를 까먹어서 아무 숫자나 정해서 주었기 때문에, 올해는 까먹지 않기 위해서 평균 S도 같이 기억하려고 한다.
    오늘은 정인이 생일이다. 5분 후에 상근이는 생일 선물로 두 숫자 R1과 R2를 말해주어야 하지만, 안타깝게도 R2를 까먹고 말았다. 하지만 R1과 S는 기억하고 있다!
    상근이를 도와 R2가 몇 인지 구하는 프로그램을 작성하시오.*/
public static void main(String[] args) {
    Scanner sc = new Scanner(System.in);
    int R1 = sc.nextInt();
    int S = sc.nextInt();
    int R2 = 2 * S - R1;
    System.out.println(R2);
}
}

 물론 R2를 다시 할당해도 되지만 굳이 안해도 될것같다 ;;; 

 

1. CSS 기초

• 내부에 스타일 태그를 이용한 방법

     <style>
        h1{
            font-style: italic;
        }
     </style>

 

 

• 외부에 CSS파일을 불러 오는 방법 
  주의할점은 외부 파일을 불러오는방법 이용시 스타일태그안에 넣으면 에러납니다. 이것때문에... ㅠㅠ 

<link rel = "stylesheet" href="./main.css">

2. CSS 선택자

• 전체선택자

전체 코드에 CSS영향을 미침
<style>
  * {
    color: red;
    }
</style>

• 태그선택자

 

해당태그에만 영향을 미침
<style>
 h1 {
   background: aqua;
  }
</style>

• 클래스선택자

해당 클래스에만 영향을 미침
<style>
      .red-color {
        color: red;
      }
</style>

• 아이디선택자

    해당 아이디에만 영향을 미침.
<style>
#orange {
        font-size: 14px;
        color: orange;
}
</style>

• 자식,후손선택자

<style>
ul > .orange {
        color: orange;
      }
 div .orange {
        color: orange;
      }
</style>

• 가상선택자
  --> 이는 실습하면서 이런게 있구나 라고 생각해도 될것같아 SKIP  
  • hover
  • active
  • focus
  • first-child
  • nth-child
  • before

3. 상속과 우선순위 

• 상속
  • 부모요소에 적용한 스타일이 후손요소들에게 까지 영향을 주는 특성
    • Font관련 속성
    • Text관련 송성
• 우선순위
  • HTML요소에 동일한 속성이 적용될 경우 어떤것을 우선으로 적용되는 지에 대한 내용
    • 명시도점수 
    • !important 무한대점 , 인라인 스타일 1000점, 아이디 클래스 태그순으로 이뤄짐 
    • 명시도 점수가 같다면 마지막에 해석되는 것
    • 명시도 점수는 상속보다 우선 

 

4. 박스 및 글꼴과 문자  

• 단위 (pxmem,rem,vw,vh)
• 박스의 특성
  • width,height
  • max-min
  • margin
  • padding border 
  • display dverflow