기초단계/HTML&CSS

2023.01.29-2 CSS

춘핑이 2023. 1. 29. 19:44

CSS

27. 스타일 시작하기

문서에 스타일 입히기 Cascading Sytle Sheet 종속시킨다 스타일 시트를
여기서 사용하는게 CSS이다.
CSS란? 스타일을 변경하기 위한 명령어 집합이다.

기본문서도 태그가 가지고 있는 스타일이 있다. 하지만 원하는 모양이 아니니 만들어줄 필요가 있다.
<h1 style="color:blue; font-size:5px;">메인메뉴</h1>


적용이된모습

css속성들 정말 많다. 갯수는 많으나 관련된 것끼리 모으면 생각보다 많지는 않다.
배경과 관련된 속성
background(color image poostion)을 다같이 지정할 수잇는데
각각 단일로 지정하고자 한다면 background-color이런식이 되서 많아보이게 된다.

이런 레퍼런스 보는법? 모질라 가서 보자.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
매우 많다. 상당부분 사용하긴 한다. 하나씩 알아보는 건 도움이 안된다.

28. 기본 선택자

특정 태그에 스타일 부여하기
태그 안쪽에 스타일 속성들을 입혔다. 그런데 일반적으로는 이렇게 사용하지 않는다.
h1태그가 3개면 수정을 한다면 반복적으로 수정을 해야한다. 유지보수할때 문제가 된다.
head태그 안쪽에 style태그를 두고 그 안쪽에 정의한다. 대상을 선택할 수있는 선택자를 포함한다.
설렉터(선택자)는 태그명, 아이디, 클래스가 있다.

h1{
    color:red;
    font-weight: bold;
}

문서내에서 h1을 사용하는 것들이 모두 바뀐다.
태그는 다르나 같은 스타일을 가질 수 있게 하고자하면 태그가 달라도 가능하다.
그런것을 그룹이라고 한다. 그룹이름은 class로 한다.

<h1 class="g1">서두</h1>
.g1{
    color:red;
    font-weight: bold;
}

이 그룹들이 색이 바뀌게 된다. 그냥쓰면 태그명으로 해석하니 '.'을 넣어준다.
다양한 element를 모아서 부여할 수 있게 된다.
<h1 class="g1" id="name1">서두</h1>
id를 부여할수잇는데 이것은 element를 식별하는 것이다.
id는 동일하게 가질 수없고 이름을 다 다르게 만들어야한다.

#name1{
    color:red;
    font-weight: bold;
}

#을 붙여서 id값에 부여할 수 있다.

29. 콤비네이션 연산자

위의 3가지 선택자를 어떻게 활용해야할까?
이렇게 만들어라와 같은 가이드가 없다. 어떻게 엮어 써야하나.
Descendant selectors A B 자손연산자
Child selector A > B 자식연산자
Adjacent sibling selector A + B 이웃한 연산자
General sibling selector A ~ B 이웃들의 연산자
찾고자하는것이 B임. 앞에서는 없었는데 한정된 느낌이든다.
앞에있는 태그를 기준으로 자손 자식 이웃한것 이웃한것들중에서 찾아라 라는 것이다.
이걸 어떻게 써먹나 정말 많은 element 중에서 어떻게 선택을 할까? 하나씩 부여하면 매우 힘들어진다.
제각각을 그루핑하는 것도 힘들다. 페이지 스타일링할때는 컨텐츠 블록 각각 스타일링을 한다. 그 후 레이아웃 블록을 스타일링한다.
가구 가구를 만드는 층을 할 수 있다
사진참조
하나씩 디자인을 주는 것은 힘들다. 대표하는 블럭에 id를 부여하자.
식별값이니 단어가 두가지 이상들어가면 특별한일이없다면 -를 넣자. 또다른 것을 구분하려면 _넣자.

#main-menu{
    font-size:20px;
}
<nav id="main-menu">
    <h1>메인메뉴</h1>
    <ul>
        <li><a href="">학습가이드</a></li>
        <li><a href="">강좌선택</a></li>
        <li><a href="">AnswerIs</a></li>
    </ul>
</nav>

그런데 이런식으로할때 잘못하면 그 밑에 있는 자식들도 바뀌어버리게 된다.
이때 사용하는 것이 콤비네이션 연산자이다.

#main-menu h1{
    font-size:20px;
}

id의 자손을 찾아서 해라 라는 것임. 근데 밑에 또 h1이 있다면? 그녀석도 적용이 된다.
자식들 중에서 하면? >를 넣어주면된다.

#main-menu > h1{
    font-size:20px;
}

이런식으로 원하는 것을 찾아서 넣을 필요가 있다. 구조를 이용해서 하나씩 내려가며 작성을 한다.

30. Sibling 연산자

자식과 자손을 구분해서 뭔가를 넣을 수있게 되었다. 그런데 이것만으로 원하는 것을 찾기는 힘들다.
+는 수평방향으로 가는 것이다. 바로 다음 태그를 의미한다. ~바로 밑동생이아닌 B가있으면 선택한다.

#main-menu > h1 + ul{
    font-size:20px;
}

#main-menu > ul{
    font-size:20px;
}

이렇게 하면 같은 내용이 되는 것이다.

그럼 그밑에 li중 처음것만 찾는다면?
class를 준다. 

<li class="first"><a href="">학습가이드</a></li>

#main-menu > .fisrt{
    font-size:20px;
}

만약 a태그에도 class="first"를 준다면 위처럼 하면 두개가 선택이 된다.
원하는 결과가 나오지 않는다. 내가 원하는 것은 li의 태그 중에서 first에 포함된 것을 하고 싶은것이다.
사실 그냥 .fisrt하면 *.fisrt한것이엇다. 모든것의 first인 것임. li.first하면 li의 fisrt를 찾게 된다.
그런데 ul안에 ul을 또 가질 수 있고 또 그안에 li class="first"를 주면 겹친다.

#main-menu > ur > li.fisrt{
    font-size:20px;
}

이런식으로 하면 자식들중 ul을 찾고 그 자식의 li를 찾는다. 조금더 정밀 조정을 할 수 있게 된다.
이웃하는 연산자를 설렉트 하는 방법을 알게 되었다.
이웃하는 동생들 중에서 특정한 class id를 찾고 싶다면 ~를 넣으면된다.

<li class="first"><a href="">학습가이드</a></li>
<li><a href="">강좌선택</a></li>
<li class="aa"><a href="">AnswerIs</a></li>
#main-menu > ur > li.fisrt ~ .aa{
    font-size:20px;
}

동생들 중에서 찾아서 등록을 한다.

31. 속성 선택자

좀 더 정밀조준 방법필요하다.
element선택할때 타입 클래스 id를 선택했다.
이제 Attirbute selectors를 보자. [속성=값]
우리가 class, id로 구분을햇는데 굳이 식별할 수 잇는 것을 이름을 부여하는 것은 비효율적이다.
속성은 다른애들과 차별화된 값을 제공한다면 굳이 건들 필요가 없다.

<li class="first"><a href="a.html">학습가이드</a></li>
<li><a href="b.html">강좌선택</a></li>
<li class="aa"><a href="">AnswerIs</a></li>

만약 식별 가능한것을 주엇다. 두개가 href속성을 사용하고 있으니 이 두개만 적용하고 싶다면 아래처럼 하면된다.

#main-menu a[href]{
    font-size:20px;
}

그런데 만약 a.html만 하고싶다?

#main-menu a[href="a.html"]{
    font-size:20px;
}

연산자를 이용해서 표현할 수 있다.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
여러개가 있다. 잘사용하지 않더라도 있었다는 것을 알아두는 것이 좋다.
attr=value 이름이 일치하는것
attr~=value 이름이 일치하는데 속성에 여러개 넣을 수있고 스페이스로 구분 완전히 전체일치 할필요없이 하나라도 일치하면됨
attr|=value 또는 -을 가지고 비교
attr^=value prefix 앞에있는것
attr$=value suffix 뒤에있는것
attr=value value가 한번이상 반복되면 포함해라 앞 뒤 가운데이든 어디든 선택

attr operator value i(예시 arr=value i) insensitive ingnore해라 값중에서 들어가는데 소대문자 가리지 말아라.
attr operator value s 소대문자를 가린다.
이런식으로 속성을 나눈다. attr=value 이게 가장많이 사용되고 나머지는 잘 사용안되지만 혹시나 번뜩 떠오를 때 사용해보자.

32. Selectors 우선 순위

https://youtu.be/LXWZRRsTnBs 연습문제들
우선순위
#h2 / h1 / .h1
id가 h2이면서 h1 태그 인것은 어떤것을 따르게 될까
h1클래스이면서 h1이 태그인것?

우선순위는 적용범위가 넓을 수록 우선순위가 낮다.
따라서 id가 가장 높다. 그다음은 class 그다음은 태그명이다.
id > class > tag

.h1 / .h1 / .h1
다같다면? 나중에 쓴것이 적용된다. 그런데 다같은데 굳이 세번에 나눠서 작성할 이유가있나
스타일은 집중하기도 하고 여러개로 나누기도 한다. 맘에 안들면 재정의 도 필요하다. 이럴때 같은 선택자가 재정의된다.
클래스보다 속성 태그가 높다. 속성이 있는 태그는 그냥 태그보다 우선순위가 높다.
결론적으로 범위가 좁을수록 적용하는 힘이 강하다는 것을 이해하면 된다.

2023.01.29 후기

어려웠던점 1.구분하기 2.블록단위로 스타일링하기
하나하나 나누는 것 한단계식 높여가는 것이 중요하다.
주말이 너무 빨리 지나간다. 힘들다.