본문 바로가기

전체 글

 (177)
[project] 포트폴리오 웹사이트 만들기 navbar menu click-JS 오늘은 navbar 메뉴를 클릭하면 해당 내용이 있는 페이지로 스크롤하는 방법을 공부했다. Element.querySelector() event.target dataset.property Element.scrollToView(options) behavior : auto(default), smooth block : start(default), center, end, nearest inline : start, center, end, nearest(default) 자세한 설명은 노션노트 참고 navbar menu click
[project] web portfolio 구축 - JS navbar scroll & transparent MDN: Window.scrollY MDN: Determining the dimensions of elements 'use strict'; //make navbar transparent when it is on the top const navbar = document.querySelector('#navbar'); const navbarHeight = navbar.getBoundingClientRect().height; document.addEventListener('scroll', () => { // console.log(scrollY); // console.log(`navbarHeight: ${navbarHeight}`); if(window.scrollY > navbarHeight) { navbar.c..
[project] 웹 포트폴리오 사이트 만들기_css 종료 드디어 오늘 웹 포트폴리오 사이트 만들기 css를 끝냈다. 사실, 한 강의당 길어야 10분인데, 실제로 내가 강의를 들으며 타이핑하면 시간이 더 오래 걸린다. 기존에 누나코딩을 통해 부트스트랩과 미디어쿼리를 배웠다면, 이번 드림코딩 강의를 통해 transform, transition과 같은 애니메이션 효과를 배울 수 있었고, 자주 쓰는 색상, 폰트 사이즈, 폰트 웨이트 등 다양한 글로벌 값을 정의하는 것과 한번의 값 수정을 통해 전체를 수정하는 팁을 배웠다. 또, box-sizing과 border-radius를 활용한 반응형 이미지 만들기를 할 수 있었다. 그동안 집에 새 식구가 오면서 개발공부를 소홀히 하였지만, 앞으로는 다시 열심히 해보려 한다. 천천히 하지만 매일 조금씩 달려가보려 한다.
[project] 웹 포트폴리오_css 요 몇일 또 집안에 일이 있어 개발 공부에 집중을 하지 못했다. 하지만, 오늘은 꼭 해야한다고 다짐하고 잠시 시간을 내어 자리에 앉았다. 웹 포트폴리오 사이트 만들기 중 About me 섹션을 꾸며주었다. 오늘은 구글링을 통해 JS, Swift, node.js 로고의 색상코드를 찾아 넣어 강사님의 것과 조금 다르게 variation을 주었다. .fa-js{ color: #f7df1e } .fa-swift{ color: #F05138; } .fa-node{ color: #3c873a; } 또, transition을 실제를 사용하여 애니메이션 효과를 직접 적용해 보았다. .major__icon i { transition: all 500ms ease; } .major__icon i:hover{ transfor..
[project] 포트폴리오 웹사이트_css 오늘은 포트폴리오 웹사이트 만들기 css 스타일링을 공부하였다. 첫 번째는 global 값을 지정하였다. 자주 쓰는 color, font size, font weight, size 값을 :root{}에 지정하였다. :root{ /* Color */ --color-white: #ffffff; --color-green: #023224; --color-gray-blue: #02241B; --color-black: #000000; /* Font size */ --font-large: 48px; --font-medium: 28px; --font-regular: 18px; /* Font weight */ --weight-bold: 700; --weight-semi-bold: 600; --weight-regular:..
[css] advanced tricks box-sizing content-box : content size에 따라 박스의 크기가 결정되며, border를 추가하더라도 box size는 여전히 content만 포함 border-box : border size가 총 박스 크기에 포함되어 계산 Absolute vs Static position의 기본 값은 static 기존 static 값을 기준으로 relative 값만큼 움직임 absolute는 근접한 부모 중에 static이 아닌 부모를 기준으로 움직임 Sticky vs Fixed position : relative/static 이면, 해당 박스가 들어 있는 부모 박스 안에서 sticky position : absolute 이면, 근접한 부모 중 static이 아닌 부모를 기준으로 sticky ..
[project] 포트폴리오 웹사이트 markup 오늘은 어제에 이어 포트폴리오 웹사이트를 wireframing 해보고, 박스 단위로 나눈 디자인을 html 문서에 markup 해보았다. 1. fabicon 만들기 & 업로드 fabicon을 만들어 배경을 투명하게 바꾸고, 이미지 파일을 project 경로에 추가한다. html 2. 파트 스스로 markup 해보기 처음으로 내가 스스로 BEM을 활용한 이름을 붙이며 각각의 섹션에 대해 markup을 했다. 그런데, 나는 BEM을 class 이름을 짓는데 사용하는줄 알고, id가 아닌 class명에 열심히 컴포넌트/엘레먼트/모디파이어 단위로 이름을 붙였다. 아래는 처참한 나의 markup... 너무 처참해서 부분만 내가 스스로 markup한 것과 강사님의 것을 비교해본다.. HOPPER Home About..
[html/css] BEM 오늘은 BEM에 대하여 공부했다. BEM이란, Block, Element, Modifier methodology의 약자로, HTML & CSS에서 이름을 작성할 때 사용하는 방식이다. block__element--modifier 와 같은 방식으로 작성한다. 아래는 예제이다. /* Block component */ .card {} /* Element that depends upon the block */ .card__btn {} /* Modifier that changes the style of the block */ .btn--orange {} .btn--big {} 예를 들면, card라는 block 단위의 컴포넌트가 존재하고, card 안에는 img, button, p 등의 elements가 존재한다..

티스토리툴바