1/15 깃허브 시작하기/CSS 선택자

soyoung·2024년 1월 17일
CSScommitgitgithubselector



GitHub

형상관리란..?
형상관리(configuration management)란? : sw의 변경사항을 체계적으로 추적하고 통제하는 하는 것
형상관리 시스템 : git, svn(git보다 쉽고 공공기관에서 사용함) 등이 있음.

  1. git scm 다운로드하기

    git scm 바로가기

  2. git 회원가입, 레파지토리 생성 후 관리를 원하는 폴더의 마우스 우키를 눌러 Git Bash를 열기

    3.이후 깃에 올라와 있는 아래 코드를 그대로 입력하면 된다.
echo "# 01_WebFront" >> README.md 
git init //초기화 명령어(webfront 폴더를 깃이 관리할 수 있도록)
git add README.md //
git commit -m "first commit" //커밋
git branch -M main //브랜치를 main으로 설정
git remote add origin https://github.com/shong69/01_WebFront.git
//레파지토리 연결 후 최초 한번만 하면 됨
git push -u o

-> 나 같은 경우 --global 옵션 설정을 하지 않았기 때문에 깃허브 계정 이메일과 아이디를 입력하라는 문구가 출력되었고, 해당하는 양식대로 입력하면 레파지토리가 열리게 된다.
(--global 옵션의 경우 해당 레파지토리에서 딱 한번만 하면 된다.)


저장소 종류와 저장 방법

working directory

🔽 git add(save)

staging area

🔽 commit

local repository -로컬 컴퓨터까지만 변경이 반영됨

🔽 push

remote repository


디렉토리 변경 리눅스 명령어

ls →하위 폴더 보여줌

cd →이동 명령어(디렉토리를 변경)

(cd 해당폴더/)

.. 하나 위로 디렉토리 이동

. 현재

/ 최상위 디렉토리

~ 홈 디렉토리(root)

->Git Bash를 잘못 연 경우 위의 명령어들을 통해 위치를 변경할 수 있다.


다른 로컬 컴퓨터에서 깃 내용을 내려받는 법

레파지토리 주소 복사 후 깃 배쉬에서 'git clone+git주소' 입력


업데이트 된 내용을 내 컴퓨터로 당겨오는 방법

git pull

CSS

선택자에 적용된 많은 스타일 중에 어떤 스타일로 웹 상에 표현할 지 결정한다.

마크업 언어(HTML)가 실제로 화면에 표시되는 방법(모양, 색상, 크기, 스타일...)을 기술하는 언어
->HTML코드가 화면에 어떤 스타일로 보여질지 지정하는 것


CSS Selector(선택자)

Selector(선택자)란?
현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열
스타일을 적용하고자 하는 요소를 선택하는 방법

태그 선택자

-현재 HTML문서 내에 같은 태그를 선택하는 선택자

*작성법
css)
태그명 {CSS 코드;}

id선택자

HTML문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자

*작성법
css)
#id속성값{css코드;}


컨벤션(convention)의 종류

-카멜 표기법 : HelloWorld 로 단어를 이어붙이되, 첫음절을 대문자로 쓴다.(자바에서사용)
-DB작성법 : 모든 코드를 대문자로 작성, 띄어쓰기는 _ 로 표시함
-하이픈 표기법(HTML) : 띄어쓰기에 - 를 사용

class 선택자

HTML문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자

*작성법
css)
.class 속성값 {css코드;}

-다중 클래스 나열 양식
클래스를 띄어쓰기로 구분하여 나열한다.

class=”test-1 aaa bbb”

모든 요소 선택자(*)

모든 요소를 선택하는 선택자

작성법
 {css코드;}

웹폰트 끌고와서 써보기

@font-face {
font-family: 'BMDOHYEON';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMDOHYEON.woff') format('woff');
font-weight: normal;
font-style: normal;
}

css)
{ font-family: 'BMDOHYEON'; (글꼴모양)
font-size: 20px; (글꼴크기)}


css파일 html로 import 하는 방법

<head></head>안에 <link href=”해당파일주소” rel="stylesheet”>를 넣는다.

    (link 태그 : 외부에 있는 파일과 연결하는 태그)


기본 속성 선택자

태그에 작성된 특정 속성을 선택하는 선택자

*작성법
선택자[속성명="속성값"] {css코드;}

(속성명->id, class, name 등)

(참고)
1)선택자는 생략할 수 있다.
2)"속성값" 양 쪽의 쌍따옴표는 홑따옴표로('')로 변경할 수 있다.

예시)
div[name="name-1"] {
    background-color: red;
}
p[name="name-2"] {
    background-color: green;
}

자식선택자

지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자

*작성법
선택자1 > 선택자2{css코드;}

선택자1 : 부모 요소 선택(반드시 필요)
선택자2 : 자식 요소 선택(반드시 필요)

예시)
<ul id="parent-ul"> 부모
        <li>자식1</li>
        <li>
            <span>자식2</span>
        </li>
        <li>자식3</li>
        <li>
            <span>자식4</span>
        </li>
    </ul>

후손(자손)선택자

지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자

*작성법
선택자1 선택자2 {css 코드;}

선택자1 : 부모 혹은 조상 요소 선택자
선택자2 : 후손 요소 선택자

예시)
<div id="test-div">
        <p>test-div 자식 요소입니다.</p>
        <p>test-div 자식 요소입니다.</p>
        <div>
            <p>나도 후손일까?</p>
        </div>
    </div>

div 아래에 있는 모든 p태그에게 속성을 부여한다.(세 줄 다 변경됨)


반응 선택자

사용자의 움직임에 따라 반응하여 스타일이 달라지는 선택자((마우스 오버, 클릭 유지...)

-요소를 클릭하고 있는 경우(:active)
-요소에 마우스가 올라가는 경우(:hover)

/*반응선택자*/
css)
.div-cls {
    border:1px solid black;
    width:200px;
    height:200px;
    background-color: gray;
    /*margin:공백 간격*/
    margin-bottom: 20px;
    cursor:pointer;    /*요소에 마우스 커서가 올라오면 손가락 모양으로 변경됨*/
}
/*요소를 클릭하고 있는 경우*/
#active-test:active {
    background-color: yellow;
}
/*요소에 마우스가 올라가는 경우*/
#hover-test:hover {
    background-color: pink;
    width:230px;
}
/*#hover-test의 요소가 변화를 일으키면 0.5초 동안 변해라*/
#hover-test {
    transition-duration:0.5s;
}

상태 선택자

입력 양식의 상태에 따라 선택되는 선택자

 :focus -> 요소에 초점이 맞춰졌을 때
 :checked -> 요소가 체크되었을 때(radio, checkbox)

 :enabled/:disabled
 ->요소가 사용 가능하거나 불가능한 상태일 때

css)
#focus-test:focus {
    background-color: red;
}                         /*요소에 초점이 맞춰졌을 때*/
  • 해당 요소에 초점을 맞췄을 때 색이 바뀐다.
  • checkbox에 클릭되었을 때, 크기가 늘어나고 색이 바뀐다.
<label>사과
        <input type="checkbox" name="fruits">
    </label> <br>
    <label>바나나
        <input type="checkbox" name="fruits">
    </label> <br>
    <label>멜론
        <input type="checkbox" name="fruits">
    </label>
css)
input[name='fruits']:checked {
    width:30px;
    height:30px;
    background-color: red;
    /*radio, checkbox는 크기를 제외한 스타일이 적용되지 않는다.*/}

동위 선택자

동위 관계(동등한 위치==형제관계)에서 뒤(다음)에 위치한 요소를 선택하는 선택자

*작성법
A
B
B
형식으로 나열되어 있다고 생각할 때

1)A선택자 + B선택자 {css 코드;}
	-A 바로 다음에 있는 B요소 하나만을 선택 (+)
2)A선택자 ~ B선택자 {css코드;}
	-A 뒤에 있는 모든 B요소를 선택(~(틸드 Tilde))

동위 선택자 예제)

html)
<div id="div1">1번 입니다.</div>
    <div>2번 입니다.</div>
    <div id="div3">3번 입니다.</div>
    <div id="div4">4번 입니다.</div>   
    <p>관련 없는 태그입니다!</p>
    <div id="div5">5번 입니다</div>
</div>
css)
#div1 + div{
    background-color: olive;   
    }

   -> div1 바로 다음에 있는 div인 '2번입니다'문구가 올리브색으로 변경됨

css)
#div3 ~ div {
    background-color: pink;   
}

     -> div3 뒤에 있는 div요소들인 '4번입니다','5번입니다'문구가 핑크색으로 변경됨

profile
soyoung
이전 포스트

1/12 HTML

다음 포스트

January 16th(CSS:selector, layout)

0개의 댓글