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 지난번 프로젝트와 달리 오늘 추가해본 것은,:..

레시피 페이지 메인 오늘 반응형 디자인까지 추가한 레시피 페이지 메인 완성!깃허브 페이지로 볼 수 있게 해두었다. https://seon318.github.io/frontend-mentor-challenges/recipe-page-main/ Recipe pageSimple Omelette Recipe An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked to perfection, optionally filled with your choice of cheese, vegetables, or meats.seon318.github.io @media (max-width: 560px) {} 560픽..

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 ..

프로젝트에서 메인 페이지와 상세 페이지 상단에 이미지 슬라이더를 넣기로 했다. 조건은 두 가지. 1. 화살표 버튼을 눌렀을 때 이동이 가능할 것. 2. 시간이 지나면 자동으로 다음 이미지로 넘어갈 것. - 옆으로 넘어가는 장면 useState와 useEffect가 필요하다.import { useState, useEffect } from 'react'; react-icons를 설치하여 화살표 아이콘을 가져온다.import { IoIosArrowForward, IoIosArrowBack } from 'react-icons/io'; 이미지 슬라이드에 들어갈 이미지들은 배열 형태로 외부에서 props로 받아오도록 한다.export default function ImageSlider({ slides }) 우선 이..

오늘의 작업 디자인을 마치고 메인과 문답 시작 페이지를 완성했다. 원래 pc에 적합한 ui로 디자인했었으나 아무래도 서비스 특성상 모바일 기기로의 공유가 빠를 것 같다는 생각이 들었다. 나 이거 해봤는데 너도 해봐 하면서 공유하는 그런 느낌의 서비스. 인스타 같은 곳에 올리기에도 모바일에 최적화되는 편이 나을 것 같아서 디자인을 수정했다. 핸드폰 화면에 들어갈 정도의 좁은 영역을 사용하는 방향으로 바꾸었다. 어려웠던 점 1. tailwind가 아직 익숙하지 않다. css보다 분명 쉬운 부분도 있지만 문법을 정확히 몰라 계속 문서를 찾아보며 헤맸다. 특히 너비와 높이를 설정함에 있어서 어려움을 많이 겪었다. header와 footer를 포함해서 스크롤바가 생기지 않게 길이를 딱 맞추고 싶은데 그게 아무리 ..

개인 프로젝트를 시작하려고보니 클론코딩을 하지 않는 이상 디자인이 필수라고 느꼈다. 평소 디자인에는 관심이 많았는데 피그마를 이용해본 적은 없었다. 강의를 듣기보다는 일단 무작정 만져보기 시작! 피그마에 로그인하고 간단한 튜토리얼을 지나가면 이런 화면이 나온다. 인터넷을 찾다보니 unsplash 플러그인을 설치하는 걸 추천하는 글이 보였다. 이곳에 unsplash를 검색하면 무료 사진을 사용할 수 있는 플러그인이 설치된다. 원하는 이미지를 검색하면 바로 다운로드가 되어 아주 편할 것 같다. 개인 프로젝트로 쇼핑몰 만들기를 진행해볼 생각인데 중학생 때부터 좋아했던 펜을 소재로 사이트를 만들어보려고 한다. 자세한 이야기는 프로젝트 게시물로.. 좋아하는 쇼핑몰 여러곳을 참고해 메인페이지 디자인을 마쳤다. 쇼핑..

결과물 HTML과 CSS 강의만 듣다가 처음으로 클론코딩을 해보았다. 처음에는 아무런 참고영상 없이 만들어서 코드가 복잡했는데 참고영상을 보면서 다시 하나하나 따라서 만들어보았다. HTML 코드 Youtube #NatureVideo #Mountain #Snow Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, facilis provident. Ipsa, nam. 1M views 1 months ago 1K 0 Share Save Report .info { padding: var(--padding); } .info .metadata .hashtags { display: flex; font-size: var(--font-small); col..