본문 바로가기

HMWK122

[HTML/CSS] grid-column, grid-row 으로 레이아웃 만들기 💡 실습 포인트! 이전 실습 때 display : grid 를 활용해서 구역을 나누어보았다면 이번에는 실제로 이미지를 넣어서 반응형으로 레이아웃을 구현해보았다. PC 화면에서는 첫번째 이미지가 제일 크게 2*2 사이즈를 차지하고 나머지는 1*1 사이즈로, 총 6장의 이미지가 각 자리에 배치된다. 모바일 화면에서는 모든 이미지가 동일하게 1*1 사이즈로 세로 정렬되어 배치된다. 💜 PC 화면 기본적으로 html 파일은 다음과 같이 작성한다. .grid-container { display: grid; max-width: 1200px; margin: auto; grid-template-columns: 1fr 1fr 1fr; } .grid-container img { width: 100%; height: 100.. 2022. 3. 2.
[HTML/CSS] Grid 반응형 레이아웃 만들기 💡 실습 포인트! 오늘은 display : grid 를 이용하여 영역을 나누는 방법을 배워보았는데, 처음 보는 속성이라 굉장히 신선했다. 일단 위와 같은 영역으로 나누는 방법을 두 가지 배워보고, 반응형으로는 어떤 식으로 만드는지 공부했다. 💜 PC 화면 🤍 1번째 방법 .grid-container { display: grid; grid-template-columns: 100px 100px 100px 100px; /* fr 은 전체 너비에 대한 비율을 의미 */ grid-template-rows: 100px 100px 100px; /* grid-gap: 10px; */ /* grid-gap 은 각 grid 사이의 간격을 의미 */ } .grid-container div { border: 1px solid.. 2022. 3. 2.
[HTML/CSS] HTML Video, Audio 다루기 💡 실습 포인트! 💜 VIDEO : 기본 형태 💜 VIDEO : 재생버튼 넣기 controls 속성을 넣으면 재생버튼 생성 💜 VIDEO : 더 나은 형태 video 태그에 src 를 넣는 것보다 source 태그에 src 를 넣는 게 호환성에 있어서 더 좋음 source 태그를 사용할 때에는 type 도 넣어주는 걸 추천! 첫 번째 source 태그의 영상이 안 나올 것을 대비하여 두 번째 source 태그를 추가하여 다른 확장자의 영상이 재생되도록 할 수 있음 💜 VIDEO : 자동재생 설정 autoplay 속성을 넣으면 자동재생 설정 가능 chrome 브라우저는 추가로 muted 속성도 넣어주어야 제대로 자동재생 동작 💜 VIDEO : preload 설정 미리 다운로드 받을지의 여부는 preload.. 2022. 3. 1.
[HTML/CSS] SCSS 로 row, col 만들기 💡 실습 포인트! Bootstrap 에는 row, col 이라는 굉장히 Grid 형태로 만들기 편한 class 가 있는데 오늘은 그것을 직접 만들어보았다. 그리고 투명하면 제대로 레이아웃이 만들어졌는지 확인이 어려워 border 과 text 를 넣어주었다. SCSS 의 @mixin 과 @include 를 활용하여 코드를 간결하게 바꿀 수 있었다. @mixin 과 @extend 는 상당히 유사한데 @mixin 의 장점이라면 내부에 묶어둔 속성들에 파라미터를 활용할 수 있다는 것이다. 💜 HTML col-6 col-6 col-4 col-4 col-4 💜 SCSS @mixin 문법을 사용하고 width 라는 이름으로 해당부분을 파라미터로 활용할 수 있게 하였다. 파라미터로 활용하기 위해서는 붙인 이름 앞에 $.. 2022. 3. 1.
[HTML/CSS] SCSS 로 Alert 박스 만들기 💡 실습 포인트! % 를 이용한 임시클래스 생성 및 @extend 를 활용하여 이미 있는 클래스를 상속, 확장해보았다. 참고로 % 는 . 대신 사용 가능한 임시클래스로 CSS 파일에서 클래스로 컴파일하고 싶지 않을 때 사용하며, 그래서 실제로 컴파일되었을 때 @extend 받은 클래스명들로 모아서 표기됨 💜 Alert 박스 레이아웃 💜 HTML Alert Number 1! Alert Number 2! Alert Number 3! 💜 SCSS %alert-box { padding: 15px; width: 90%; margin: auto; margin-top: 15px; font-weight: bold; border-radius: 5px; } .alert-box-green { @extend %alert-bo.. 2022. 3. 1.
[HTML/CSS] SCSS 로 리스트 만들기 💡 실습 포인트! CSS 의 작업이 고도화될수록 불필요한 셀렉터의 과용과 연산 기능의 한계 등으로 인해 CSS 관리는 부담이 될 수밖에 없다. 하지만 웹에서는 표준 CSS 만 동작할 수 있기 때문에 다른 선택권이 없다. 그래서 등장한 것이 CSS 전처리기인 Sass, Less 등인데, 사용방법은 일단 전처리기로 작성만 하고, 그렇게 작성된 내용을 웹에서 동작 가능한 표준의 CSS 로 컴파일하는 과정을 거쳐 실제로 웹에서 동작시키는 것이다. 오늘 배운 것은 SCSS 로 Sass 의 3 버전에서 새롭게 등장한 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 것이며, Sass 의 모든 기능을 지원하는 CSS의 상위집합이라고 할 수 있다. Sass 와 SCSS 의 차이로는 중괄호 및 세미콜론의 유무라.. 2022. 3. 1.
[HTML/CSS] SNS Profile 만들기 💡 실습 포인트! 이 화면 레이아웃 구성해보는 것만 5번은 연습한 것 같다. (익숙해질 때까지 처음부터 다시 만들어보기..) Bootstrap 에 익숙하지 않은 상태에서 처음 시작했을 때에는 상단 프로필 구성만 한참 걸려서 디테일에 연연하지 않고 틀만 잡아보고, 두번째로 연습할 때에는 큰 박스들 디테일만 잡고, 세번째 도전할 때는 세부 박스 디자인을 잡고, 네번째 연습할 때는 프로필 상하단을 구별하는 profile 라인도 만들어보고.. 마지막에는 시간 줄이기 이런식으로..? PC 화면 잘 만들었다 싶어서 모바일 화면 보면 좌우 정렬 안 맞고, 모바일 화면 좌우 정렬 조정하면 PC 화면이 뭔가 이상하고..의 반복이었다. 💜 PC 화면 💜 모바일 화면 2022. 3. 1.
[HTML/CSS] Bootstrap 으로 카드 레이아웃 만들기_Grid_2 💡 실습 포인트! Bootstrap 으로 재미있는 카드 레이아웃을 만들어보았다. PC 화면에서는 이미지 기준으로 좌측, 우측 번갈아가면서 내용이 나와야 하고, 모바일 화면에서는 여백 없이 모두 이미지가 왼쪽, 내용이 오른쪽에 나와야했다. 그냥 CSS 로 이러한 반응형 레이아웃을 구성하려면 media query를 사용했을텐데, Bootstrap 의 row, col, order 등의 class 를 활용하니 꽤나 편하게 만들어졌다. 💜 PC 화면 💜 모바일 화면 2022. 3. 1.
[HTML/CSS] Bootstrap 으로 카드 레이아웃 만들기_Grid 💡 실습 포인트! Bootstrap 을 이용하여 반응형으로 카드 레이아웃을 만들어보았다. 아직은 Bootstrap 에서 가져온 레이아웃을 가지고 내가 원하는 디테일을 잡는 데에 시간이 좀 걸리는데 익숙해지면 확실히 하나하나 CSS로 만드는 것보다 편하고 특히 반응형 만들 때 유용할 것 같다. 💜 PC 화면 💜 태블릿 화면 💜 모바일 화면 2022. 3. 1.
[HTML/CSS] Landing Page 만들기 💡 실습 포인트! transform 속성의 scale 을 사용하여 마우스 오버를 했을 때 살짝 작아지는 효과를 주었다. 강의를 통해 사진은 그대로 있고 마우스 오버를 할 때 하얗고 두꺼운 테두리를 덮어씌워 애니메이션 효과를 주는 방법도 배웠는데 그렇게 하는 경우 사방의 여백이 날아간 것처럼 보이기 때문에 처음 시작할 때의 padding 값보다 끝날 때의 padding 값을 더 줘야 예쁘더라. 💡 PC 화면 아이콘 배치나 이미지 배치는 이전에 해봤기에 안 어렵겠다싶었는데 뜻밖에도 폰 이미지때문에 반응형으로 웹페이지를 만들 때 대환장파티였다. PC 화면에서 배치하는 것은 문제가 되지 않았지만 반응형의 특성상 가로너비를 조절하더라도 어색하지 않게 배치가 되어야 하는데, position : absolute 와 .. 2022. 3. 1.
[HTML/CSS] 상품 레이아웃과 애니메이션 구현하기 💡 실습 포인트! 제일 공을 많이 들였던 부분은 애니메이션 효과이다. 마우스 오버하는 경우 적당한 높이(이미지 높이의 60% 정도)의 가격이 적힌 반투명한 창이 올라오게끔 구현하는 것이었는데 position, transition, transform, opacity, overflow 과 같은 다양한 속성을 조합해서 만들 수 있었다. 💡 PC 화면 PC용 레이아웃 자체를 구성하는 것은 엄청나게 어렵지는 않았다. 회색 박스를 position: absolute 속성을 활용하여 위치조정을 하고있었는데 margin collapse 현상 때문에 애를 먹었고, 해결하고 나니 회색박스와 아이콘이 들어있는 박스의 간격이 제대로 조절되지 않아서 시간이 한참 걸렸다. 다만, 태블릿이나 모바일에서 화면을 보았을 때 어색한 부분.. 2022. 3. 1.
[HTML/CSS] 쇼핑 카트 레이아웃 & pseudo-class로 인터랙티브 버튼 만들기 💡 실습 포인트! 레이아웃 디자인은 물론이고 pseudo-class 를 활용하여 특정 행위(마우스 오버, 포커스, 클릭 중 등)에 대한 디자인을 다르게 할 수 있음! 💜 Pseudo-class 셀렉터 .btn:hover { background : chocolate; /*마우스를 올려놓을 때*/ } .btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/ } .btn:active { background : brown; /*클릭 중일 때*/ } input:focus { border : 2px solid red; } a:link { color : red; /*방문 전 링크*/ } a:visited { color : black; /*방문 후 링크*/ } pseudo-clas.. 2022. 3. 1.

티스토리툴바