html 5

[Frontend Mentor] FAQ Accordion main 아코디언 페이지

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

Project 2024.06.03

[Frontend Mentor] Social Links Profile 소셜 링크 프로필 완성

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

Project 2024.05.31

[Frontend Mentor] Recipe-Page-Main 레시피 페이지 만들기

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

Project 2024.05.29

[프로젝트] 유튜브 클론코딩

결과물 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..

Project 2023.11.06

[HTML] 생활코딩 WEB1 - HTML&Internet 복습

시작하며 내 문제를 해결하기 위해서 코딩을 배워야 한다. 얼마나 이 문제가 나에게 중요한지 생각해야 한다. 원인(code) -> 결과(app, program, webpage...) 웹페이지를 만드는 코드는 HTML(Hyper Text Markup Language) HTML의 특징 1. 쉬움 2. 중요함 - 가장 거대함 3. public domain - 저작권 X HTML 코딩의 단계 1. 기획 기획이란 무언가를 만들기 위해 상상하고 설계하는 과정 제목을 누르면 옆에 영상과 내용이 나오는 사이트를 만들자! 2. 환경 준비 코드 편집기 - Visual Studio Code 3. 기본 문법 학습 및 실습과 수정 HTML 기본문법 태그 글자 속성 태그 굵게 bold 굵게 (강조) < 밑줄 underline ~ ..