Simple Is Best

이번 포스팅에서는 SCSS 핵심 문법에 대해서 알아보겠습니다. 1. @import : [CSS Nomalize]에 대해서 기억하시나요? CSS 최상단에 기본적으로 적용시키는 CSS 코드를 Nomalize라고 부르는데 이를 CSS 파일을 쓸 때 마다 복사 붙여넣기 하면 가독성도 떨어지고 시간도 많이 소요됩니다. 이러한 CSS Nomalize 내용을 담기 위해서 동일한 폴더 내에 _reset.scss 파일을 생성하였습니다. ▶ test.scss에서 코딩한 내용은 새로고침 할 때 마다, 자동으로 test.css 에 반영됩니다. ★ 참고 : _는 컴파일 금지명령입니다. _reset.scss body { margin : 0px; } div { box-sizing: border-box; } 이를 test.scss ..

이번 포스팅에서는 CSS의 전처리엔진인 SCSS/SASS에 대해서 알아보겠습니다. ▶ SCSS/SASS : CSS의 전처리 엔진 CSS를 더욱 쉽게 작성하게 끔 해주는 tool ▷ SASS 와 SCSS의 차이점 - SCSS가 기존의 CSS와 문법적으로 유사하므로 SCSS에 대한 학습을 진행하겠습니다. SASS : 괄호, 세미콜론 X SCSS : 괄호, 세미콜론 O SCSS로 작성된 문법은 반드시 CSS로 변환하여 HTML 파일에 첨부해야 합니다. 웹브라우저는 오직 [HTML, CSS, JavaScript] 3가지의 언어만 읽을 수 있기 때문입니다. 그럼 SCSS/SASS로 이뤄진 파일은 반드시 컴파일을 해야 하는데 컴파일 하는 방법에 대해서 알아보겠습니다. SCSS 설치법 [수동 설치법] https://..

이번 포스팅에서는 웹 브라우저 내에 숨겨진 부분, 딥한 부분에 대해서 다뤄 보겠습니다. 이번 포스팅은 별로 중요한 내용은 아니니 넘어가셔도 좋습니다 ㅎ Shadow DOM 을 보는 방법 1. 크롬 개발자 도구를 킨 후, 맨 오른쪽 설정 버튼을 클릭한다. 2. Show user Agent shadow DOM을 킨다. 3. 끗 본 내용은 예제를 중심으로 풀어나가는게 맞는 것 같습니다. input 예제를 통해서 Shadow DOM에 대해서 알아보도록 하겠습니다! input의 placeholder에 스타일을 주고 싶습니다. 다음과 같은 코드를 작성하면 당연한 결과로 placeholder가 회색으로 음영처리 되는 것을 볼 수 있습니다. 저는 이 placeholder를 가운데 정렬 & 색깔을 red로 바꾸고 싶습니..

안녕하세요 데이터미널입니다. 이번 포스팅에서는 Pseudo-elements에 대해서 알아보도록 하겠습니다. 아래의 사진에 나온 글씨를 어떻게 스타일링 할까요? HTML 나는 서울대학교 학생입니다. 첨부된 사진을 제작하기 위해서 사용된 HTML 코드는 위의 코드가 전부입니다. 나머지는 모두 CSS를 사용하여 만들었습니다. 이럴 때 사용하는 개념이 바로 Pseudo-elements입니다. 우선 Pseudo-elements는 text클래스의 '처음 글자'와 '마지막 영역'을 담당하여 스타일링 하고 있습니다. CSS 코드를 살펴볼까요? CSS .text::first-letter{ color : blue; font-size : 100px; } .text::after{ content : '사실 아닙니다^^'; co..

이번 포스팅에서는 box-shadow에 대해서 알아보겠습니다. .white-box { background: white; padding: 20px; border-radius: 5px; box-shadow: 0.5px 0.5px 2px 1px black; } box-shadow 1. x축 이동량 2. y축 이동량 3. blur 4. spread 5. 색상 https://daterminal.tistory.com/23 table에 border-radius 안 먹힐 때 table { border-collapse : collapse; border-radius : 10px; border-style : hidden; box-shadow : 0 0 0 1px black; } box-shadow라는 속성을 이용해 테두리를..

이번 포스팅에서는 CSS 덮어쓰기에 대해서 알아보겠습니다. 스스로 짠 코드가 아닌 기존에 존재하는 코드들을 덮어쓰기 하려면 CSS에 적용되는 우선순위에 대해서 알아야 합니다. 우리가 이전에 [CSS selector]를 학습했던 내용들을 리마인드 하겠습니다. CSS Selector 1. tag에 대해서 적용 (tag명{}) p{ } 2. class에 대해서 적용 (.class명{}) .class{ } 3. id에 대해서 적용(#id명{}) #id명{ } CSS Selector 우선순위 (동일한 태그에 적용되었을때, 상충되는 값들을 어떻게 처리하는지?) 1. style(10000점) >>>>>>>> 2. id(100점) >>>>> 3. class(10점) >> 4. tag(1점) 중요! 스타일링을 위해서는 ..

안녕하세요. 오늘은 부트스트랩을 활용한 grid 레이아웃에 대해서 알아보겠습니다. 오늘 기온이 35도네요... 너무 더워서 반쯤 정신이 나간채로 포스팅을 올리는 점 양해바랍니다. 이전까지 우리가 레이아웃을 썼던 방법은 3가지가 있습니다. 1. float 2. display : inline-block 3. flexbox 모두 좋은 방법들입니다. 하지만 float를 쓰면 width 를 섬세하게 조정해야 한다는 점이 참 불편했었는데요. 오늘은 부트스트랩에서 제공하는 grid 에 대해서 알아보겠습니다. Bootstrap Grid 레이아웃 grid : 사이트를 균일하게 쪼개서 레이아웃을 잡고 싶을 때 사용합니다. - 내부적으로 flex-box를 활용하여 만든 것이기 때문에 IE8 이하에서는 작동하지 않습니다. g..

이번 포스팅에서는 프론트엔드 '컴포넌트' 라이브러리인 Bootstrap 에 대해서 알아보겠습니다. ▷ 컴포넌트 라이브러리 : 필요한 웹 UI / 기능을 복붙식으로 사용 가능 Bootstrap의 장점 1. 반응형 웹 개발이 쉬워진다. ▶ grid 를 사용하면 쉬운 레이아웃을 제작 가능 2. 빠른 퍼블리싱이 가능하다. ▶ 미리 제작된 클래스명을 가지고 스타일링이 가능 설치 방법 (CDN 방법 - Content Delivery Network, 안정성이 떨어진다) 1. 아래 주어진 URL에 접속하여 get start 에 접속한다. https://getbootstrap.com/docs/5.0/getting-started/introduction/ Introduction Get started with Bootstra..