Definition of Seon

CSS에서 사용자 지정 속성(CSS 변수)를 정의할 때는 전용 표기법이 있다.이 표기법은 SCSS와 CSS에서 사용하는 방법이 다르다. 1. 언제 사용하는가?복잡한 웹사이트에서 많은 값을 반복적으로 사용할 때,예를 들어 어떤 특정 색상을 반복적으로 사용할 때혹시 그 색상을 바꿔야하는 일이 생길 경우한 영역에 값을 저장해놓고 참조를 통해 값을 사용하는 것이 좋다. 2. CSS 변수:root { --main-bg-color: brown;}element { background-color: var(--main-bg-color);} root 위치에 선언할 경우 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있다.이렇게 선언한 변수를 사용할 때는 var() 함수를 지정하고 매개변수로 사용자 지정 속성의..

오늘 도전한 과제는 FAQ 아코디언 페이지다.질문 옆에 있는 + 버튼을 누르면 자세한 내용이 나온다. 시맨틱한 Html를 작성하기 위해 아이콘 부분은 img가 아닌 div로 태그를 정했다.백그라운드 이미지로만 해당 아이콘들을 넣었다. 자바스크립트 코드를 추가하여 플러스 버튼을 누르면 hidden을 사라지게 하여아코디언을 구현할 수 있었다. 이번에 새롭게 다루어본 css는 배경이미지와 배경색을 한 번에 넣는 것.먼저 배경이미지를 넣고 그 뒤에 no-repeat, 색상 이름을 쓰면 끝!그럼 배경이미지의 크기를 넘어가는 부분은 해당 색상이 보인다. 이번에도 모바일과 데스크톱이냐에 따라 다른 ui를 적용하여반응형디자인으로 개발을 완료했다.다 만들고보니 글씨가 조금 작은 것 같기도...? 지금 연달아 3개는 오직..

약 1시간 걸린 작업.소셜 링크 프로필을 만들었다!  이번에는 반응형은 아니다.지난번에는 가이드라인을 뒤늦게 발견해서 바로 적용을 못했는데이번에는 스타일 가이드라인을 따라서 스타일링을 했더니보다 빠르게 작업을 완료할 수 있었다. https://seon318.github.io/frontend-mentor-challenges/social-links-profile-main/ Social links profileJessica Randall London, United Kingdom "Front-end developer and avid reader." Github Frontend Mentor LinkedIn Twitter Instagramseon318.github.io 지난번 프로젝트와 달리 오늘 추가해본 것은,:..

::marker로 Marker 스타일링하기 리스트는 과 로 나뉜다.기본적으로 은 1. 2. 3. ...으로 글머리가 생기고은 작은 점으로 글머리가 생긴다.하지만 이 스타일이 마음에 들지 않는다면...?그럴 때 사용하는 css의 ::marker 기능!::marker { /* ... */} 원하는 리스트의 마커 요소에 스타일링을 추가할 수 있다.아래와 같이 사용하면 된다.li::marker { color: red; font-size: 1.5em;} 여기에 사용할 수 있는 프로퍼티는 다음과 같다.1. font properties모든 폰트 프로퍼티를 사용할 수 있다.font, font-size, font-family 등등...font-size를 다르게 한다면?약간 어색하지만 이런 결과도 가능하다.마커만 커..

CSS 폰트 (글꼴) 적용하기아름다운 웹사이트를 위해서 기본 폰트가 아닌 사용자 지정 폰트가 필요할 때가 있다.보통 프로젝트에서 폰트 설정은 가장 처음에 진행하는데,장기간 프로젝트를 하다보면 다음 프로젝트를 진행할 때 폰트 추가 방법을 까먹기 쉽다. CSS의 @font-face를 사용하면 웹페이지에 온라인 폰트나 폰트 파일을 적용할 수 있다.폰트 문법은 다음과 같다.@font-face { font-family: ; src: [,]*; [font-weight: ]; [font-style: ];} 1. font-family : 필수, 폰트명으로 사용할 이름을 지정해준다.2. src : 필수, 폰트 파일의 위치를 나타내는 Url을 url() 괄호 안에입력한다.대체 폰트가 있다면 쉼표 뒤에 추가로 입력..

Recipe Page Main HTML과 CSS를 잘 활용하고 싶어서 어떤 프로젝트를 해볼까 찾다가Frontend Mentor라는 사이트에서 도전과제를 제공한다는 사실을 알았다.바로 가입하고 리포지토리 만들어서 첫 프로젝트를 해보았다.앞으로 이 사이트에서 여러 도전과제들을 수행하며 순수한 HTML, CSS에 더 익숙해져야지. 코드는 깃허브에 정리중.이번 프로젝트에서는 깃모지를 써보려고 한다. https://github.com/seon318/frontend-mentor-challenges GitHub - seon318/frontend-mentor-challenges: Challenges from Frontend MentorChallenges from Frontend Mentor. Contribute to ..

Sass는 CSS 프로세서입니다. CSS만으로 작성한 코드는 복잡하고 관리가 어렵습니다. Sass는 CSS의 방식은 그대로 적용하되, 기능을 추가하여 관리를 쉽기 해줍니다. 컴파일러를 돌리면 컴파일러가 Sass코드를 CSS 코드로 변환해줍니다. 그래서 Sass를 CSS Pre-processor라고 부릅니다. Sass의 특징 1. 변수 제공 Sass에서 변수는 $ 달러 표시로 사용합니다. 2. 중첩 가능 nav ul li에 스타일을 추가하고 싶을 때 nav 안에 ul을 넣고 그 안에 li를 넣는 방법으로 중첩할 수 있습니다. 3. 연산자 4. partials, imports : 여러 파일에서 CSS를 쓸 수 있게 해주고 불러오게 해줍니다. 5. Mixins 재사용 가능한 코드 여러줄이 있는 변수라고 생각하..

HTML과 CSS를 잘 작성하기 위해서는 세 가지를 고려해야 합니다. 1. Responsive Design 반응형으로 작동하는 웹사이트를 만들어야 합니다. 미디어 쿼리나 fluid 레이아웃을 넘어서 화면에 맞는 글꼴과 이미지의 크기, 데스크톱 또는 모바일 중에 무엇이 먼저인지 등등을 고려해야 할 것입니다. 2. Maintainable and scalable code 유지가능하고 확장가능한 코드를 만들어야 합니다. 깔끔하고 이해하기 쉽고 확장성이 높은 코드를 써야 나의 코드를 보는 다른 개발자들에게도 좋습니다. 어떻게 마크업을 구조화하고 클래스 이름을 지어야 할지 등을 고려해야 합니다. 3. Web Performance 웹사이트를 더 빠르게 만들기 위해 우리는 httmp 요청과 코드 자체를 줄이고 코드를 ..

간단한 애니메이션 넣는법! @keyframes를 입력하고 애니메이션 이름을 정합니다. 0%일 때와 100%일 때 어떤 모습일지를 정합니다. 투명도와 위치 변화를 통해 페이드인 되는 듯한 애니메이션을 넣어보았습니다. @keyframes moveInLeft { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translate(0); } } 애니메이션을 적용할 때는 애니메이션 적용을 원하는 곳에 아래 내용을 입력하면 됩니다. animation-name: moveInLeft; animation-duration: 3s; animation-timing-function: ease-out; 이 3가지를 요약해서 적으면 아래와..

배경이미지 넣는 법 .header { height: 95vh; background-image: url(../img/hero.jpg); background-size: cover; background-position: top; } 전체 뷰포트의 95% 정도로 헤더 위치를 설정합니다. 백그라운드 이미지 url에 이미지 경로를 넣는데 이때 따옴표는 사용하지 않습니다. 백그라운드 사이즈를 커버로 지정하고 포지션을 상단을 기준으로 설정하면 창의 크기가 바뀌어도 상단은 항상 고정되어 나옵니다. 그라데이션 넣는 법 https://developer.mozilla.org/ko/docs/Web/CSS/gradient - CSS: Cascading Style Sheets | MDN CSS 자료형은 의 특별한 종류로 여러 색의..