코딩기록

리액트)스터디6- 웹퍼블리셔-css메모장 선택자... /업뎃중 본문

프론트/리액트

리액트)스터디6- 웹퍼블리셔-css메모장 선택자... /업뎃중

뽀짝코딩 2024. 5. 16. 18:46
728x90

웹퍼블리셔 강의 

기초부터 - https://wtss.tistory.com/168#

실습 - https://blog.naver.com/rebehayan/221351418973

 

 


*텍스트한줄효과 2가지 방법

- 1.overflow: hidden; width: 50px; height: 10px;
2.overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

 

*이미지를 표현하는 방법 2가지
1. html- img 태그로 표현(의미가 있을 때) / alt 태그 - 대체 문자 표현
2. css - background 속성(의미가 없을 때) - 대체 문자 x
3. 이미지를 background 속성 - 웹 표준 준수하기 위해서. 
    가상으로 대체 문자를 만듬(IR 효과).
    이미지 스프라이트 기법

 

* 콘텐츠 요소를 보이지 않게 하는 방법 4가지
1. display: none; -- display: block; (영역 사라짐)
2. visibility: hidden; -- visibility: visible; (영역유지)
3. opacity: 0; -- opacity: 1; (투명도) (영역유지)
4. width: 0; height: 0; overflow: hidden; (IR효과) (영역 컨드롤가능)

 

*가로정렬하는 방법 2가지
1. float: left; -->  text-align: center;가 안먹힘 float가 강함.
2. display: inline;

 

* | 구분선, 바 만드는 2가지 방법

 

1.  foot에 가상요소(  | 구분선, 바 ) 넣기     :before   가 포인트  

.footer:before {content: '~~'; }

footer에 들어가는 [ | ]  넣기

.footer:before {content: ''; width: 1px; height: 12px; background: #ccc; position: absolute;
left: 0; top: 2px;}

맨앞 [ | ] 없애기

/* 가상으로 요소 넣기 */
.footer:before {content: ''; width: 1px; height: 12px; background: #ccc; position: absolute;
left: 0; top: 2px;}
.footer:first-child:before {width: 0; height: 0;} /* 맨앞에 가상요소 제거  */

* 이미지는 인라인 구조라 폰트사이즈나 line-height 값이 숨어져 있어서 이미지뒤에 글씨가 보일수 있다.

수정전

그럴땐 display: block; 를하면된다.   디스플레이 블럭을 못쓰는 경우느 하이트, 라인하이트를 으로 준다.

수정후

 

 

 

2. css

divider 클래스가 span 태그라 display를 inline-block 처리함.

1rem = 10px;

(base.css에 html font-size를 10px로 설정해서 1rem렘이 10px임.)

 

*rem은 html 최상단 font-size의 픽셀을 기준으로 1rem이 정해짐.

그래서 보통 base.css에 공통으로 쓰일 css 컬러나 폰트크기, 폰트를 작성할때 <html>태그의 font-size 속성의 px픽셀을 설정함.

.divider {
  display: inline-block;
  width: 0.1rem;
  height: 1.2rem;
  border-left: 1px solid var(--color-gray-800);
}

 

 

*블럭구조를 가운데로- margin: 0 auto;

*letter-spacing-글자사이간격

*line-height 문장사이 간격- height와 같이 설정하면 한줄일때 중앙에 오는 효과.
*자식에 height값이 있으면 부모는 없어도 된다.

*width:100% 생략가능.
*마진-바깥여백, 패딩-안쪽여백.
*박스를 가운데 정렬하려면 전체를 맡고 있는 wrap에게 마진 0 auto를 준다.

*전체틀 잡을땐 id 세부적 반복되는 부분은 클래스를 많이쓴다.

*윤곽잡을때  display: grid; grid-template-columns: 1fr 1fr; (2컬럼일때) 그리드도 쓴다.

*padding은 왼,오는 가능하나 위,아래는 안먹힌다. 위,아래,왼,오 padding을 주려면
padding: ~~px; display: inline-block; 사용.

*자식블록구조를 가운데로 옮기려면 부모에 text-align: center;를 주면 된다. 
-> display: inline; 구조를 알면 텍스트를 화면 가운데로 옮길수 있음.

*css에서  ul, li ::marker 리스트 점 ( 목록 구분 점 )  없애기 - list-style:none;  아니면 overflow: hidden; 으로 영역밖으로 보내서 안보이게 할수도 있다.

*앞뒤 줄바꿈- display: block;

*float를 자식박스에 주면 상위박스에 overflow: hidden;을 준다.-안하면 구조깨짐.

*position: absolute; right:0; top:0; 은 반응형할때 안씀. 기준되는것에 position: relative;

*a태그는 인라인 구조라 padding이 안먹힘, 그러면 display: block; 을 써서 블럭구조로 바꿔 적용한다.

*margin-right: -1px; 는 두줄을 한줄로 보이는 효과가 있다.

*input 박스가 텍스트보다 약간 위에 올라갔을때 - vertical-align: -2px;  

 

 

*선택자   

  1. ^="와우"   

.상위클래스 [class^="하위클래스 중 앞단어 일부만 적기~~"]

 

.navigation안, 클래스 속성이
" icon- "으로 시작하는것 모두 선택

ex) icon-phone, icon-book, icon-water...

.navigation [class^="icon-"] {
	margin-right: 0.5rem;
 }

 

 

2.  *="와우" 

[class*="와우"]  /  class [class*="와우"]

class이름중 와우가 포함되어 있는 요소 전부.   /    class이름중 와우가 포함되어 있는 class 요소 전부.

ex) 와우바우, 와우풍선, 와우...

[class*="navigation__list"] {
  list-style: none;
  width: 18rem;
  height: 100%;
}

 

3. [ ] : 속성 선택자  [title="banana"]

[title$/^="banana"] 속성선택자에 $달러나, ^캐럿 등 정규표현식 사용가능.

a태그의 타이틀이 바나나인 것만 선택.

[ html ]
<a href="" title="banana">바나나</a>
<a href="" title="apple">사과</a>

[ css ]
a[title="banana"] {
  color: skyblue;
}

 

 

 

혹은 title만 적어서 title이란 속성이 있는 a태그만 선택.

[ html ]
  <a href="" title="banana">바나나</a>
  <a href="" title="apple">사과</a>
  <a href="" title>월요일</a>
  <a href="" >화요일</a>

[ css ]
a[title] {
  color: hotpink;
}

 

4. a 태그 가상선택자 :link, :visited

a:link - 방문 전

 

a:visited - 방문 후 

 

 

5.  not -제외하고 선택.  : 가상클래스

 p:not(.wrap) {   }

클래스가 wrap이 아닌 p태그들만 선택.

 

태그이름p,a,span:nth-child(1) {  }

태그의 첫번째 자식.

 

.wrap:nth-of-type(1) {  }

wrap 클래스 첫번째 타입.

 

.wrap:only-child {   ]

태그가 하나만 있을때 사용.

 

 

6.  :: 가상요소  

.wrap::first-line

첫번째 줄만 선택

 

.wrap::first-letter

첫번째 글자(단어에서 첫글자)만 선택

 

::after  //  ::before

content: "";

컨텐츠를 필수로 적어야 함.

아래와 같이  많이씀.  

a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: skyblue;
}

 

 

 

 

 

 

 

 

*선택자 공부 깃헙사이트

https://flukeout.github.io/

->너무 재밌다ㅎㅎㅎ 검색하면 답안을 올린 블로거 글이 나온다

 

*선택자 종류 정리 블로그

https://coding23213.tistory.com/15

 

 *상자를 일정간격으로 맞추는 방법

 1. 전체 상자 크기 width 설정
 2. 내부 justify-content: center; 로 처리

 만약 상자 내부 데이터가 추가될 가능성이 있다면?
 width 설정하지말고
 gap 설정.  gap: 1rem;

 

 

border보더로 화살표 만들기  ( 가상요소 )

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형
저작자표시 비영리 변경금지

'프론트 > 리액트' 카테고리의 다른 글

리액트)1주차 학습 - css 애니메이션  (0) 2024.06.08
리액트)1주차 학습 - html, CSS 문법  (0) 2024.06.04
VSCode 자주 쓰는 필수 플러그인, 확장 프로그램, 익스텐션  (0) 2024.05.10
리액트)스터디3- css 참고 및 사이트  (0) 2024.05.09
리액트)스터디2- 개발자 도구 ( 생활코딩,제주코딩베이스캠프-칠리 )  (0) 2024.05.08
'프론트/리액트' Related Articles more
Comments