김하영

[ 코딩과정 ] : 코드펜 정리 반응형 이미지 레이아웃 ver.2...codepen.io버전1에서 살펴보면 아무것도 들어가지 않는 의미없는 태그가 2개나 있다.이럴 때 가상요소로 대신해서 쓸 수 있다.- 의미없는 태그 대신 가상요소 사용하기wrap-section의 자식으로 들어오게 하려면 section에 가상요소를 적어줘야한다.section에 가상요소를 적어주게 되면before -> 가장 첫째after -> 막내그리고 원래 있던 wrap-section의 자식 태그들은 첫째와 막내 사이에 들어가게 된다.background-image는 before로 들어와 첫째로 쓰여야하고,그럼 자동으로 background-color는 after로 들어가게 된다.- before 적용하기bg-image 자리에 wrap-sec..

[ 코딩과정 ] : 코드펜 정리 반응형 이미지 레이아웃 ver.1...codepen.io- background-image 투명하게 만들기background-image를 투명하게 만들기 위해서 opacity를 적용해본다.미리보기 화면을 보면 background-image만 투명해져야하는데 전체적으로 다 투명해졌다.background-image만을 투명하게 만들려면현재는 wrap-section에 있는 background-image를container의 아래로 깔리게 만들어야 한다.그리고 background에 배경색도 줄건데 그 부분도 container 밑에 깔려야한다. 순서로 따지자면 container가 제일 위로 올라와야하고 그밑에 배경색, 그리고 background-image가 가장 밑에 있어야하고,이 모..

[ 코딩과정 ] : 코드펜 정리[ 버튼과 텍스트 넣기 ]글씨가 들어갈 위치인 back-bg의 자식으로 text-box를 만들어준다.이런식으로 위쪽에 텍스트를 적어주고 아래에 버튼을 만들어줄 것인데,이것뿐만아니라 다른 디자인들을 만들어낼 때 text-box에 바로 텍스트를 적어주게 되면나중에 버튼이나 다른 것들을 추가할 때 번거로운 일이 생기게 된다.그리고 저런 버튼 형식은 한 웹페이지 안에서 크기나 둥글기 정도 등 약간의 디자인만 바뀌고 많이 쓰이기도 하고,저런 형식이 필요한 또 다른 공간에 떼서 바로 붙여넣어서 쓸 수 있도록 컴포넌트를 만들어줘야한다.ㄴ 이 코드가 다른 곳에서도 쓰이게 되는지, 독단적으로만 쓰일지를 곰곰히 생각해가면서 코딩해야한다. 버튼을 만들 때 크기를 너비를 생각해보면,max로 써야..

[ 코딩과정 ] : 코드펜 정리 반응형 레이아웃 구현하기 (이미지)...codepen.io 젠코딩으로 이런 형태를 만들어준다.( div.wrap-section > div.container > .img-box.img-box-$*5 > img )alt 까먹지 말고 적어주기.선까지 다 적어주고나서 한줄에 같이 나오도록 flex를 적용한다. 이 상태에서 img-box에 max-width로 너비를 주려면 계산을 해야한다.일단 계산을 하려면 container에 너비가 있어야하니까 임의로 지정을 해준다.1440을 5로 나눠주면 288이 나온다.max-width를 적용해줬지만 코드가 먹질 않는다.max-width는 너비가 auto일 때 100%인 아이들만 사용이 가능한데 img-box는 flex-item이기 때문에 m..

[ 코딩과정 ] : 코드펜 정리 media (미디어 쿼리)...codepen.io일단 박스를 하나 만들어준다. 그리고 그 밑에이렇게 작성해준다. 미디어쿼리는 특정한 조건을 걸어주는 코드이다.특정한 화면 사이즈가 되면, 그 조건이 성립됐을 때 아래쪽의 코드가 실행이 되는 것이다. 굳이 screen이라고 적은 이유는 screen 말고도 print나 audio 등 다른곳에서도 사용이 가능하다.전체적인 부분에서 사용할 때 all이라고 작성해도 가능하다.우리는 화면에서만 쓸거기 때문에 screen이라고 지정을 해준것이다. and 소괄호는 screen 그리고 소괄호 안에 들어오는 특정한 수치가 성립이 되면 코드가 실행된다는 뜻이다.소괄호 안에 max-width를 적어줄건데 만약 max-width: 300px을 적어..

[ 코딩과정 ] : 코드펜 정리 세로값이 고정된 반응형이미지...codepen.io기존에 만들었었던 반응형 이미지 코드를 보면이 코드는 세로값이 고정되어있지 않기 때문에 크기가 줄면 비율이 유지된 상태로 줄어든다. 이러한 코드를 써야하는 경우도 있지만,카드들이 많은 경우, 예술, 미술 쪽에 관련된 이미지들은 세로값이 고정된 상태로 줄어야 하는 경우가 있다. 세로값을 고정하게 된다면 누구한테 적용시켜줘야할까?높이는 img-box에 줘도 되고, img태그에 바로 줘도 상관없다.모든 태그들은 애초에 높이가 auto일 때 0이기 때문에 img태그에 높이를 주면 상위엘리먼트인 img-box가 그대로 높이를 가진다.오히려 img-box에 높이를 주면 img태그가 상속받도록 코드를 한번 더 적어줘야하기 때문에img태..

[ 코딩과정 ] : 코드펜 정리 화면비례 이벤트 배너...codepen.io이렇게 레이아웃을 잡아준 상태에서 img태그에 사진을 넣어준다.그리고 아까 반응형 이미지에서 사용한 코드를 훔쳐온다.높이를 px로 사용했을 때도 구조를 작게, 크게 움직이면 변한다. 이렇게도 쓸 수 있지만 또 다른 방법은,vh단위를 사용하는 것인데 200vh로 설정하면 위 사진처럼 높이가 엄청 커진다.vh를 사용해서 특정하게 높이를 주려면 더 줄여줘야한다. 1vh당 1%로 생각하면 되는데 20vh로 줄이면 20%인셈이다.아까 px을 썼을 때와 비슷한 결과가 나오고 있다.이렇게 쓰면 우리가 원하는 반응형 이미지로 쓸 수 있다. img태그에 적어줬던 높이 100%를 20vh로 변경하면?동일한 결과값이 나온다.vh는 화면에 비례해서 나..

[ 반응형 이미지 만들기 ]이미지를 줄였다 늘렸다해보면 반응형으로 나올것같지만,이미지는 고유의 크기가 있기 때문에 처음부터 만들어지지 않는다.특정 코드를 작성해야 반응형이 된다. 이미지 박스안에 이미지 태그를 넣어주고,언스플래쉬에서 원하는 사진을 찾아 img태그에 넣어준다. img-box에 배경색을 칠하면 아래쪽에 여백이 있는 걸 확인할 수 있다.이미지의 여백을 없애주기 위해서 display를 block으로 변경해준다.이미지의 너비를 %로 작성해주고 일단 100으로 작성해본다.이미지를 늘렸다가 줄였다가 하면 잘리지 않고 반응형으로 나온다.크기를 %로 작성하면 반응형으로 나온다는 것을 알 수 있다. 그런데 해결해야할 문제점들이 생긴다.ㄴ 문제점: 이미지의 크기가 화면 크기만큼 나온다.ㄴ 원인: 이미지의 너..

이런 구조를 만들기 위해서 기존의 스와이퍼 페이지네이션 커스텀 했던걸 가지고 단계별로 진행한다. [ 1단계 ] 내가 가지고 있는 레이아웃과 만들어야하는 레이아웃을 비교한다. 1단계: 갯수 줄이기 개발자 모드를 확인해보면 swiper-slide, swiper-pagination-bullet 이 두가지를 제거해야한다는 것을 비교, 확인할 수 있다. - swiper-slide 제거 ㄴ 만들어야하는 구조에 보이는 것처럼 이미지가 딱 2장만 나오도록 만들어주기 위해서 swiper-slide 2개만 제외하고 나머지는 삭제해준다. -> swiper-slide를 제거했을 때 문제점이 생긴다. 위에 화면처럼 오른쪽 공간이 비어서 나오고, 화살표 버튼이 사라졌다. 이렇게 나오는 원인은 페이지의 갯수가 부족하기 때문이다. ..

[ 네비바 채우기 ] 네비바에는 flex-grow를 주지 않고 그 안에 들어올 li들에 너비를 제한해서 2차메뉴에서도 같은위치 바로 아래로 떨어질 수 있도록 만들어주기. ul안에 li가 4개, 각각에 a태그를 넣어주고 텍스트를 만들어준다. ul, li, a태그에 각각 선과 배경색을 추가하여 크기와 위치를 정확하게 파악한다. ul과 li같은 태그들은 class를 사용하지 않기 때문에 선택자를 써줘야하는데, 위의 방법보다 조금 더 줄여서 자식선택자가 아닌 후손선택자로 써줄 수 있다. [ 노멀라이징 ] ul, li, a태그를 모두 노멀라이징 해줘야 깔끔하게 나온다. [ li 정렬 ] 자세히 보면 배경색이 칠해져 있는 부분은 a태그, 그것을 감싸고 있는 주황색 선은 li다. li들을 한줄로 정렬해줘야지만 a태그..