본문 바로가기

전체 글83

[IT] SASS - VScode에서 사용하기 ( VS코드) SASS !! 앞으로 VScode사용법, 구조, 기초분법, 함수, 연산자, 템플릿 , 파일 가져오기 등을 알아보자 ! ㅇ SASS 란 ? ㅡ CSS의 확장 언어 : CSS보다 조금 더 높은 자유도를 개발자들에게 부여한다 ( CSS의 전처리 언어 ) ㅡ 변수, 반복문, 가정문 등 이 있다.. ㅡ 브라우저가 읽을 수 있는 언어 : HTML, CSS, JavaScript 가 있다. ㅡ sass (scss) 는 webpack, node 로 컴파일 해서 쓴다 .( VScode의 사스 확장형으로 사용가능함 ) ㅇ VScode 에서 SASS 사용해보기 ㅡ 먼저 2가지 확장자 설치 해보자 ㅡ main.scss 파일 생성 후 창의 가장 하단부의 [whatching sass] 누르면 동일한 파일명으로 .css파일이 생성된.. 2024. 1. 29.
[IT] HTML - position 속성이란 ? ㅇ position 이란 ? ㅡ Normal Flow를 따라서 위치가 배치된다. ( cascaing 의 흐름 ) ㅡ top , bottom , left, right 의 값에 따라 최종 위치가 배치된다 . ㅡ 배너의 위치, 아이콘의 위치 등을 지정할 때 사용한다. ㅇ position 의 종류 ㅡ static (기본값) ㅡ absolute 1) 요소를 Normal Flow에서 제거 하고, 2) 가장 가까운 부모 기준으로 동작이 흐른다 . 3) 그런요소가 없으면 최상위 부모 를 기준으로 한다 . 4) float 처럼 둥둥 뜨게 된다 . 5) 주로 기준점으로 잡고 싶은 부모를 기준을 relative를 설정하고, 자식요소에 absolute로 자주 쓴다 . ㅡ relative 1) Normal Fl.. 2024. 1. 27.
[IT] CSS Cascading 이란 ? 상속, 우선순위 ㅇCascading : 폭포같은, 위에서 아래로 흐르는... 뜻 ㅇ CSS 개발을 할 때 흔히 겪을 수 있는 실수는 뭐가 있을까 ? ㅡ 요소에 CSS 를 디자인을 줬지만 적용되지 않을 떄.....!!! ㅇ 이유가 뭘까 ? 1. 상속 ㅡ 부모 요소에 적용되는 스타일은 자식 요소로 상속된다. ㅡ 일부 속성은 자식에게 상속되지 않는다 ( ex, 배경색, 배경이미지, margin ,padding 등 ) 2. 우선순위 ㅡ 선언된 위치 : 브라우저는 HTML/CSS 코드를 위에서 아래로 해석한다 브라우저 기본스타일 < 외부 스타일시트 < 내부스타일시트 < inline 스타일 ㅡ명시도 (Specificity) : 적용범위가 더 구체적일수록 우선적용된다 tag < attribute , class < id ㅇ 해결방법은.. 2024. 1. 26.
[IT]] CSS - 가상 요소 선택자란 ? / CSS로 말풍선 모양 테두리 만들기 (border) ㅇ 가상 요소 선택자 ㅡ 실제로 존재하지 않는 가상의 요소를 추가해서 스타일을 적용한다 ㅡ 문법 selector::가상_요소_선택자 { } ㅡ 보통 추가 메뉴를 만들거나, 테두리를 말풍선 형태로 디자인할 때 , 작은 배너효과 등등에 사용한다. ㅇ 필수적인 몇가지 확인해보자 ㅡ ::before , ::after 앞 or 뒤에 가상의 요소를 추가하여 스타일을 적용함 문법에 content:""; 를 필수로 함께 적어야한다. ( 가상 요소의 컨텐츠를 만들어 줘야함. 텍스트,이미지 등이 들어갈 수 있음) ex) 인기 있는 메뉴에 BEST를 붙이고 싶을 때도 가능 .number::after { content: "Best"; font-size: 20px; color: red; } ㅡ ::placeholder 플레이스.. 2024. 1. 26.

티스토리툴바