반응형



◎ :NOT 선택자

▼ 내용

:NOT() 선택자는 ( ) 안에 있는 조건이있는놈만 빼고 CSS 문법이 적용된다.

--CSS-- p:not(.classy) { color: red; } body :not(p) { color: green; } --HTML-- <p>Some text.</p> <p class="classy">Some other text.</p> <span>One more text<span>




◎ input::placeholder

▼ 내용

input의 placeholde의 css를 적용시킬수있다.

input::placeholder { font-weight: 300; color: rgba(0, 0, 0, 0.7); }

◎ CSS 의 대문자 , 소문자

▼ 내용

text-transform 을 쓰면 그 태그의 글자는 대문자 또는 소문자로 변환할수있다.

text-transform: uppercase; // 대문자 text-transform: lowercase; // 소문자



반응형
반응형

POST CSS는 일부로 사용하지 않았다.

IE에서 안먹히고 실무에서 사용하기 힘들다는게 내 판단이다.

알아두고는 있으나 사용하지 않고 하였다.

GRID로 짠 레이아웃이라고 생각했으면 좋겠다.

◎ practice 1 grid

이 아래 사진 한장을 grid로 짜서 html 레이아웃을 만들어 보았다.




이 아래가 내가 만든 html이다 파일 첨부


◎ practice 1-2 grid

솔직히 이건 개판이다 인정...



원본사진




이게 내가만든건대 솔직히 개판으로만들었다 꼬여서.. .다시풀기귀찮았다.


practice1-2.zip







반응형
반응형


◎ POST CSS란?

▼ 내용

POST CSS는 우리의 CSS를 조금더 현대적으로 바꿔주는 플러그인이다.

좀더 풀어 설명하자면 POST CSS 는 JS 플러그인을 사용하여 CSS를 변환시키는 툴 입니다.

이런 플러그인을 사용하여 lint , 변수 , mixin 을 사용하거나 미래의 css 문법을 사용할수 있습니다.

POST CSS 는 언어가아니라 자동으로 신기술 CSS 를 호환가능하도록 변환시켜주는 플러그인일 뿐이다.

1. CSS에 문제가없는지 미리 확인해서 에러로그를 준다.

2. 지금 발전중인 CSS의 현대기술들을 브라우저에 호환되도록 자동 변환해준다.

공식 문서 https://postcss.org

◎ BEM 란?

▼ 내용

BEM 이라는건 CSS에서 class를 선언하는 방법 중 하나


◎ POSTCSS-preset-env 설치

▼ 내용

POSTCSS 의 수많은 플러그인중 하나이다.

https://preset-env.cssdb.org

preset-env 의 공식문서 과거 이름인 css-next 였다.

https://cssdb.org

css db 는 기본적으로 css의 모든 properties를 포함하고있다.

최근의 나온 property 들은 어느브라우저에서 구현되는지의 정보등을 알려준다.

설치법

npm install postcss-preset-env

완료되면 이렇게 뜬다.



dependencies 부분에 저렇게 추가가 된다.

이걸론 부족하여 추가 설정을 해야한다


"postcss": { "plugins":{ "postcss-preset-env": { "stage": 0 } } }

stage 3은 지원하고 0 은 아직 브라우저에서 지원을 잘 안함


◎ POSTCSS-preset-env 작동 되는지 테스트

▼ 내용

preset-env 에선 작동이 되는지 테스트 코드를 준다.

https://preset-env.cssdb.org/playground

정상적으로 설치가 되었다면 아래의 소스코드를 입력후

웹브라우저로 보면 자동으로 css가 변환이 되있을것이다.

변환이 되있따면 percel 을 통하여 preset-env를 정상 설치한것이다.

@custom-media --viewport-medium (width <= 50rem); @custom-selector :--heading h1, h2, h3, h4, h5, h6; :root { --fontSize: 1rem; --mainColor: #12345678; --secondaryColor: lab(32.5 38.5 -47.6 / 90%); } html { overflow: hidden auto; } @media (--viewport-medium) { body { color: var(--mainColor); font-family: system-ui; font-size: var(--fontSize); line-height: calc(var(--fontSize) * 1.5); overflow-wrap: break-word; padding-inline: calc(var(--fontSize) / 2 + 1px); } } :--heading { margin-block: 0; } .hero:matches(main, .main) { background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x); } a { color: rgb(0 0 100% / 90%); &:hover { color: rebeccapurple; } }




반응형
반응형

모바일 쪽 작업을 하다보면 가로보기와 세로보기의 레이아웃을 다른게 해야할 일이 있을 때도 있습니다. 세세한 width 값을 맞춘다던가, 가로보기를 할 때 넓어진 width 에 무언가를 넣을 경우도 생길 수 있을 것입니다. 이럴때 여러가지로 고민을 하게 되는데, 여러가지 방법들 중에 CSS를 다르게 불러와 보는 것도 하나의 좋은 방법일 수도 있습니다.

<link rel="stylesheet" type="text/css" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" type="text/css" media="all and (orientation:landscape)" href="landscape.css">



위와 같은 방식으로 사용하면 디바이스를 세로로 볼 때는 portrait.css 를 불러오고, 가로로 볼 때는 landscape.css 를 불러오게 됩니다. 그런데 이렇게 사용하게 되면 portrait 와 landscape 의 경우 두가지 CSS를 제작해야하고 만약에 세로와 가로의 레이아웃이 거의 비슷하고 일정 부분만 다른 경우 이렇게 사용하면 동일한 부분의 수정은 두 파일을 항상 동시에 수정해주어야 하는 번거로움이 발생하게 됩니다. 그래서 세로를 기준으로 하고 가로보기 시에 특정한 무언가를 약간만 수정하고 싶다면 아래와 같은 방법을 사용하면 더 좋을 것 같습니다.

<link rel="stylesheet" type="text/css" media="all" href="basic.css">

<link rel="stylesheet" type="text/css" media="all and (orientation:landscape)" href="landscape.css">

위와 같이 사용하게 되면 항상 basic.css 가 불러오게 되고 가로로 볼 경우 landscape.css 를 추가적으로 불러오게 됩니다. 그렇다면 basic.css 를 통해 기본적인 레이아웃을 구현하고 landscape.css 를 통해 가로보기 시에 필요한 몇가지만 추가해 주면 훨씬 더 효율적으로 사용할 수 있을 것 같습니다.



출처: https://htglss.tistory.com/122 [행복하기]


반응형
반응형

◎ box-shadow

▼ 내용

그림자 효과를 나타내기위해 사용한다


◎ box-shadow 문법

▼ 내용

첫번째 길이 값은 수평거리 (음수 :왼쪽 || 양수 : 오른쪽)

두번째 길이 값은 수직거리 (음수 : 위 || 양수 : 아래)

세번째 길이 값은 흐림 반경을 지정한다. (투명도)

색상값은 첫번쨰로 와도되고 마지막으로 와도 된다

box-shadow: 5px 5px 5px gray;


◎ box-shadow 지원 브라우저

▼ 내용

거의 모든 브라우저에서 다 지원한다.


BOX-SHADOW 나 TEXT-SHADOW나

블록 그림자냐 ,텍스트 그림자냐 차이일뿐 문법이나 이런건 다 똑같다.



반응형

+ Recent posts