post-thumbnail

accordion button

먼저, iccordion-item부모태그안에 버튼과 버튼을 누를때 나올 문장을 형제관계로 만든다.button에 aria-expanded="false" 로 닫혀있는 상태를 만들고버튼을 누르면 "true"로 속성값을 변화시킬것이다."true"시 accordion-conte

6일 전
·
0개의 댓글
·

callback함수

콜백함수 > 콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다. > test함수의 인자에 sayHi함수, '하리보좋아' 가 들어간다

2023년 8월 22일
·
0개의 댓글
·
post-thumbnail

탭메뉴 만들기

탭메뉴 마우스가 메뉴에 올때 탭메뉴가 아래에 추가되는걸 만드려고한다,, 먼저 html, > >>

2023년 8월 18일
·
1개의 댓글
·

for문

가장 일반적인 for문의 형태는console.log(i)를 5번 반복하는 반복문let i = 0 : 변수 let i를 선언하고 0으로 할당i <= 5 : for문을 얼마나 돌릴 것인지 조건을 적는 부분i++ : 루프가 한번 돌때마다 변수 증감식여기에서는 i가 0부

2023년 8월 11일
·
1개의 댓글
·
post-thumbnail

switch문

if/else문 대신 사용할 수 있다.if/else 문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.하지만 switch 문은 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.

2023년 8월 2일
·
2개의 댓글
·

if/else/else if

if문 else절 > if(조건식)문은 괄호에 들어가는 조건을 평가해서 참일 경우에 코드 블록이 실행된다. else절 뒤에 이어지는 코드 블록은 조건이 거짓(false)일 때 실행된다. >> 예시로, age에 24를 할당했고, age가 18이상이다라는 조건에 만족

2023년 7월 21일
·
0개의 댓글
·

padding을 이용한 이미지비율 유지

padding-top, 또는 padding-bottom을 이용하여 할 수 있다.img태그에 부모태그가 있어야함,부모 태그에 padding-top, 또는 padding-bottom에 원하는 비율을 넣는다. position: relative; 를 이용해 기준을 잡고 pa

2023년 7월 10일
·
0개의 댓글
·

position

position은 레이아웃을 배치하거나 요소를 위치시킬때 사용하는 css속성.상속x기본값, 따로 설정해줄 필요없음.position: absolute는 <가장 가까운 위치에 있는 조상 요소를 기준> 부모를 기준으로 절대적으로 움직이게 된다.일반적으로 absolute

2023년 6월 10일
·
0개의 댓글
·

transform태그

transform > 포토샵에서 command+t처럼 transform은 물체를 회전시키거나 크기를 키우거나 등등 하는거임! 그럼 css에서는 어떻게 사용하는지 고고 transform: translate() > 요소를 이동시킬때 사용함 translateX, trans

2023년 6월 10일
·
0개의 댓글
·
post-thumbnail

iqos버튼 hover

하면서 어려웠던 부분은, 버튼 부분인데 버튼을 hover했을때 색이 변하는건 많이해봤지만 색이 왼쪽에서 오른쪽으로 점점 채워지는것은 이번이 처음이라 대혼란,, 하지만 난 해내지a태그에 after를 사용해서 옆에 먼저 민트색백그라운드를 만들어둔다,a태그엔 position

2023년 6월 7일
·
0개의 댓글
·

넷플릭스 클론코딩

background-repeat:repeat : 가로 , 세로방향으로 반복repeat-x : 가로방향으로 반복repeat-y : 세로방향으로 반복no-repeat : 반복 안함initial : 기본값으로 설정inherit : 부모요소를 상속받아 적용클릭, 호버 등등 비

2023년 5월 30일
·
0개의 댓글
·

block과 inline-block의 차이

display: inline; > text만큼의 공간만 차지하고 줄바꿈을 하지않는다. width와 height / margin,padding / line-height 사용불가. display: block; > 무조건 한줄로 공간을 차지한다. display: inli

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

flex grid

flex는 한방향 레이아웃 시스템이라면, grid는 두방향(가로/세로) 레이아웃 시스템이다.flex랑 똑같이 부모요소에 grid를 설정한다.grid도 부모에 주는 속성과 자식에게 주는 속성이 있다.여러단위를 섞어서 사용 할 수 있다.fr : fraction(분수, 적은

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

오늘의집

@media screen and (max-width:1255px)@media screen and (max-width:1023px)

2023년 5월 9일
·
0개의 댓글
·
post-thumbnail

flex반응형 웹사이트만들기

크게 container 안에 header,main,sectin들,footer 나누어 진행하였다.header와 main을 만든다.main의 백그라운드를 채워야 흰색글씨가 보이기때문에 먼저 main부터em?px단위처럼 고정된 길이가 아닌 브라우저가 어떤 기준에 따라 계산하

2023년 4월 29일
·
0개의 댓글
·
post-thumbnail

video태그

_ _ vedio src = 업로드하고자 하는 파일 경로를 적어야한다. vedio src = 업로드하고자 하는 파일 경로 controls controls를 사용하면 영상을 컨트롤할 수 있는 패널이 추가가 된다. controls 안했을 경우 controls 했을 경우

2023년 4월 21일
·
0개의 댓글
·
post-thumbnail

유튜브모바일

유튜브 보면서 이거 똑같이 따라해봤음! 먼저 섹션부분을 나누어서 어떻게 해야할지 생각해본다! 크게 4개로 분류 헤더/ 영상나오는 부분/ 영상 정보나오는 부분/ 업넥스트부분 크게 나누어서 시작한다! 헤더부분 > 헤더안에서도 유튜브로고부분/헤더오른쪽에 아이콘들 이

2023년 4월 20일
·
0개의 댓글
·

css복습

오늘은 4월 13일 복습이 중요하기에 css복습을 할것이다. 회사다니면서 공부한다는게 쉽지가 않네,, 하지만 하자.

2023년 4월 20일
·
0개의 댓글
·
post-thumbnail

네이버 일부분 만들기

오늘은 4월 11일 이거를 만들어볼거다.

2023년 4월 12일
·
0개의 댓글
·
post-thumbnail

쿠폰 만들기 대작전

오늘도 공부를 한다. 오늘은 금요일,.. ㅎ이거를 만들어 볼 것이다. 도전!더 쉽게하는 방법이 있겠지만 약간의 시행착오 끝에 만들긴했다. ㅎ중간에 모르는건 검색해서 하긴했지만,,박스를 많이 만들어서 헷갈렸는데 그래도 난 잘하는듯중꺾마ㅏㅏㅏ!!

2023년 4월 7일
·
0개의 댓글
·