본문 바로가기

CSS

 (18)
[SCSS] scss로 코딩하기 1. 확장프로그램 설치하기 vs code 하단에 watch sass 버튼을 눌러서 Watching... 상태일때 scss를 작성하면 저장할때마다 css파일이 실시간으로 만들어진다!  2. settings.json  Flie - Preferences - Settings 에서 Workspace - Live Sass Compiler - Edit in settings.json Edit in settings.json을 누르면 settings.json 이 생성되는데, 아래 코드를 넣어주면 된다..! 파일 경로 잘 볼 것..... css 생성이 계속 안돼서 30분을 고민했는데 src을 빼먹었던것.......ㅎ...scss 파일을 저장하면 css폴더에 css파일이 자동으로 생성된다! 저장할때마다 실시간으로 잘 만들어진..
Flex VS Grid Flex VS GridFlex 1차원. 수평, 수직 영역중 하나의 방향으로만 레이아웃을 나눌 수 있다. ( 컨텐츠 )개발자가 다양한 크기의 화면 내에서 반응형 요소를 적절하게 배치할 수 있다.개발자가 동적 레이아웃의 여러 인스턴스를 만들고 컨테이너 내에서 콘텐츠를 손쉽게 정렬 할 수 있도록 한다. Grid 2차원. 수평과 수직을 동시에 영역을 나눌 수 있다. ( 컨테이너 ) 열과 행의 항목을 정렬하여 개발자가 데스크탑, 태블릿 및 스마트폰 디스플레이를 위한 큰 레이아웃과 전체 페이지의 렌더링 및 모양을 쉽게 제어할 수 있도록 한다.그리드로 정의된 셀 내부에 배치된다. 전체 레이아웃을 만들고 정의하는 것은 여전히 css grid의 강력한 장점!  Grid의 문제점IE11에서 일부 속성을 제외하고 지원한다...
[ css ] background - position과 size position 과 size 속성을 사용해서 배경 이미지를 만들 것이다. position이랑 size속성을 이용해서 배경 이미지를 조절 할 수 있다는 생각은 못하고 margin값을 줘서 사이즈를 조절하려고 했었다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 포지션이랑 사이즈 속성을 사용안하고 하려니까 배경이미지가 짤리고 내부 요소들에 margin값을 줘서 전체 사이즈를 만들려고 했....ㅎㅎㅎㅎ 이렇게 하면 절대 안됨......ㅠㅡㅠ 100% 100% / auto 85% 순서대로 position / size를 나타낸다. 가로 100% 세로 100%의 위치에서 사이즈는 가로 auto 세로 80%를 의미 한다! 0% 0% / auto 50% 를 준다면 가로 세로가 0%인 위치에서 세로 50% 축소된 이미지가 된다..! 예시로 들..
[ css ] ::before / ::after before와 after는 css3의 가상요소이다. - content를 꼭 사용해야한다..! ::before / ::after 는 선택한 요소 앞, 혹은 위에 가상 콘텐츠를 삽입한다. 아래 사진은 spring_season_blend_page 클래스의 앞과 뒤에 가상 콘텐츠로 꽃 배경을 넣어 주었다. 여기서 content는 before와 after를 사용할 때 꼭 사용하는 속성이다! HTML에는 존재하지 않고 css에서만 존재하는 가상 콘텐츠이기 때문에 자바스크립트로 제어하기 어렵다. content: ""; 를 안써주면 추가가 되지않는다..! background로 이미지를 주고 width값과 height를 주어야 이미지가 제대로 나온다..! + 수정..!!!!! 위에 처럼해도 잘 나오는데 backgroun..
[CSS] alignment - position과 transform으로 가운데 정렬 아래 예시로 가운데 정렬을 해보쟈 부모박스인 container에 position : relative를 주고 box에는 position : absolute / top과 left는 각각 50%씩 주어 box는 부모 박스를 기준으로 50%씩 이동하게 되었다. 그러나 이렇게 하면 정 가운데가 box의 왼쪽 상단에 맞춰져 가운데 정렬이 되지 않는다..! 가운데 정렬을 해주기 위해 box의 절반만큼 가운데로 이동시키면 되므로 transform : translate(-50%,-50%) 해주었다.
[CSS] alignment - 가운데 정렬 하기 요소들을 가운데 정렬하는 여러가지 방법들이 있다. 1. margin : auto 파란 상자에 margin : auto를 주었다. 수평적으로는 가운데정렬이 되었으나 수직은 적용이 안된다..!! 위 박스에 text-align : center를 주면 적용이 안된다. 2. text-align : center text-align은 텍스트가 아니더라도 다른 요소들을 정렬 할 수 있다. 그러나 div같은 경우는 적용이 안된다. block 요소에서만 text-align은 적용이 안되기 때문..! 정렬을 하면 block 요소 안에 있는 inline 요소들만 정렬이 적용된다. -> div에는 적용이 안됨. -> inline요소인 button은 적용됨. 3. transform : translate( n , n ); tran..
background background 태그의 배경을 지정하는 속성이다. background-color : 배경 색을 지정해준다. background-image : 배경 이미지를 지정해준다. background-repeat : 배경 이미지의 반복 여부를 정해준다. no-repeat : 반복하지 X repeat-x : x축으로 반복 repeat-y : y축으로 반복 repeat : 반복해줌 background-position : 배경 이미지의 위치를 정해준다. 왼쪽부터 이미지가 출력되는게 기본값이다. left, top, center, bottom, right를 이용해 위치를 정해줄 수 있고, 픽셀, 상수를 이용해서 위치 지정이 가능하다. background-size : 배경 이미지를 여러 크기로 조절할 수 있다. auto :..
[CSS] transition transition 요소의 움직임을 정의 할 수 있다. transition-property : 트랜지션을 적용시킬 속성을 정한다. ex) transition-property: background-color; (배경 색 속성을 트랜지션 함) all : 모든 속성이 트랜지션 효과를 받는다.none : 트랜지션 효과를 주지 않는다. transition-duration : 변화를 줄 시간을 정한다. 얼마동안 변화를 줄 것인지...! transition-timing-function : 트랜지션의 진행 속도를 정한다. transition-delay : 트랜지션의 시작을 연기한다. transition-initial : 기본값으로 설정한다. transition-inherit : 부모 요소의 속성값을 상속받는다. 속성을..

티스토리툴바