FE 교육 2주차 TIL

임규성·2023년 3월 29일
1

FE교육

목록 보기
2/9
post-thumbnail

CSS란?

html이 뼈대 혹은 구조를 만드는 것이었다면 CSS는 그 구조에 살을붙이고 스타일링을 하는 것이다!!

추가적으로 css로 스타일링하는 것을 '먹인다' 는 표현을 쓴다고 한다!!!

CSS를 적용하는 3가지 방법

  1. 인라인 스타일

    <h1 style="color: royalblue"> 인라인 스타일 입니다.</h1>

    위에는 html내에서 body태그 내에 작성한 코드이고 인라인 방식은 이렇게 직접 태그 내에 스타일링을 하는 것이다!

  2. 내부 스타일 시트
    html 내부 head태그 안에다가 스타일링 하는 방식이다!!!

    <style>
          h2{
              color: olivedrab;
          }
      </style>

    위코드는 head 태그 내에 작성되있는 것이다!!!

  3. 링킹 스타일 시트(핵심이다!)

    css파일을 따로 만들어서 그 파일내에 스타일링 하는 것이다!!!

위 3가지가 동시에 명시 된다면??

이때는 우선순위에 따라서 적용이 된다!!

우선순위
인라인 스타일> 내부 스타일시트 > 링킹 스타일시트

링킹 스타일 시트

링킹 스타일 시트 방식에서는 먼저 html의 head태그 내에
어떤 css파일을 명시할 link할 것인지
link태그로 연결 시켜준다!!!
: 원하는 태그만 선택해서 CSS 먹이자!!
이 때 선택자라는 것을 이용하는데.....

선택자란 ?

원하는 태그나 클래스 id를 선택해서 해당하는 요소에 스타일링을 하는 것이다!!!

전체 선택자

*{
	/*모든 요소가 선택된다!!*/
}

태그 선택자

태그 이름{
	/*해당하는 태그가 선택된다!!*/
}

클래스 선택자

.클래스 이름{
	/*해당하는 클래스가 선택된다!!*/
}

id 선택자

.id 이름{
	/*해당하는 id가 선택된다!!*/
}

Git!!

명령어들...

git add. → 오늘 쓴코드 남김없이 추적하겠다.

git commit-m “first” -> 이때 이름은 "first"가 아니어도 된다!!

git config --global user.email "dla9310@naver.com"

git config --global user.name "GyuSeongLim"

push하는법!!

  1. create new reposity들어가기!!
  2. reposity 이름 지어주기
  3. 만들어진 reposity에서 열린 페이지의 명령어들을 차근차근 입력해주면
  4. vs코드와 github에 푸쉬가 된다!!!
profile
삶의 질을 높여주는 개발자

0개의 댓글