웹1 6일차(24.01.17) / 5일차 복습

=  -> 대입한다는 의미

오른쪽에 있는 것을 왼쪽에 대입.

-> 속성값을 속성에 대입한다.

 

tab -> 태그를 기준으로 뒤에 오는것들을 "자동완성" 하겠다는 의미.

ex) div.box + tab

class 선택자의 용도

=> 같은 태그들끼리 구별해주거나, 그룹화 시켜줄 때 사용함.

<div(여는태그) class(속성)="box(속성값)"></div(닫는태그)>

 

css 순위

**같은 순위끼리는 밑에오는 css가 힘이 강하다.

 

[1순위] 선택자로 선택된 class 선택자
[2순위] 혼자있는 class 선택자
[3순위] 선택자로 선택된 태그 선택자
[4순위] 혼자있는 태그 선택자

 

 

https://codepen.io/hayeong0409/pen/oNVZLEL

힘이 강한 css 복습

  

---

 

하이퍼링크

=> 사이트로 이동 가능한 형태

 

클릭해서 이동할 수 있는 형태를 만들어줘야함.

a태그에는 target이라는 속성이 포함되어있음.

기본값 :  _self

 

속성값

1. _self => 현재 보고있는 페이지가 바뀌면서 이동 (기본값)

2. _blank => 사이트가 새 탭에 열림

 

 

title 이라는 속성

=> 속성값 입력하면 마우스를 올렸을 때 말풍선으로 나타냄.

a태그는 inline요소.

=> 만약 너비와 높이 커스텀이 필요하면 상황에 맞게 다른 display 속성값으로 바꿔 사용해야함.

 

a태그는 가진만큼 클릭 가능 (글씨 뿐만아니라 배경색에 커서를 올려도 말풍선이 나옴)

 

[노멀라이즈]

커스텀되어있는 태그를 기본상태로 돌려주는 행위

ex) a태그 노멀라이즈

 

a {color: inherit; text-decoration: none;}

inherit => 기본상태로 커스텀

text-decoration => 텍스트 줄 커스텀

none => 없음

 

노멀라이즈 주의사항

노멀라이즈와 커스텀은 이어서 작성 X

따로 작성해줘야함.

 

 

https://codepen.io/hayeong0409/pen/dyrNreN

하이퍼링크와 앵커태그

---

 

[행간조절]

line-height => 행간 조절 속성

 

[사용처]

텍스트 세로 중앙 정렬.

 

[사용법]

행간수치와 상자높이 수치를 동일하게 작성

ex) height: 50px;  => line-height: 50px;

 

---

[가로 행간 조절]

 

브라우저에서 도형취급 받는 요소

1. block(기본)

2. flex(최신) 

 

브라우저에서 텍스트 취급받는 요소

1. inline

2. inline-block

3. 텍스트

 

=> 도형인지 텍스트인지에 따라서 정렬 형태가 달라진다.

 

[도형 정렬 속성(코드)]

 

margin-left: auto;   => 오른쪽 정렬

margin-right: auto;   => 왼쪽 정렬 

*반대이기 때문에 주의*

margin-left: auto; + margin-right: auto;    => 중앙정렬

 

ㄴ 고무줄을 당겨서 놓을 때를 생각하면 이해가 쉬움.

 

     오른쪽 손을 놓으면 왼쪽으로 감 -> 왼쪽정렬

     왼쪽 손을 놓으면 오른쪽으로 감 -> 오른쪽 정렬

     양쪽을 놓으면 가운데로 감 -> 중앙정렬

 

 

[텍스트 요소 정렬 속성(코드)]

 

text-align: left;   => 왼쪽 정렬

text-align: right;  => 오른쪽 정렬

text-align: center;  => 중앙 정렬

 

텍스트 속성은 적용한 태그에 영향이 가기보단,

아래쪽에 있는 요소에 적용된다고 생각하면 쉽다.

ex) span 자체에 적용된다기보단, span 아래에 있는 텍스트에 적용됨.

 

 

텍스트 정렬하는 text-align속성은 움직이고 싶은 대상을 감싸고 있는 엘리먼트에 적용해야함.

ex) inline-block요소로 커스텀 상태인 span정렬 => span이 아닌 body에 적용시키기.

 

 

 

https://codepen.io/hayeong0409/pen/LYaWRRL

텍스트 가로정렬

 

 

 

---

 

[여백속성]

margin과 padding 두가지로 이루어져있다.

 

margin=> 오브젝트와 오브젝트 분리 , 외부 여백이라고 생각

padding=> 버튼형태에 많이 사용. 오브젝트 분리와 동사에 너비높이 포함 (감싼다라는 표현, 내부여백이라고 생각)

 

 

[padding의 특징]

1. inline요소에 padding-top과 padding-bottom을 적용하게 되면, 태그가 고정된 상태로 padding값만 적용된다.

ex) padding-top 값을 적용한거지만 화면은 이동하지않음.

 

 

https://codepen.io/hayeong0409/pen/YzgZGEL

padding

 

 

 

"피그마"