그럼에도 불구하고

layout 만들기 Ver_3 ※ 화면너비 1260px 초과 ※ 화면너비 1260px 이하 /* 화면 너비 0 ~ 1240px */ @media (max-width: 1260px){ #wrap{ width: 100%;} section:nth-of-type(1) { height: 300px;} section:nth-of-type(2) { height: 300px;} section:nth-of-type(3) { width: 100%; height: 300px;} article { width: 100%; height: 300px;} } 첫 번째 section과 두 번째 section의 높이를 300px로 수정 => aside의 높이가 600px이기 때문에 기존에 section의 높이가 200px 일 때는 se..

layout 만들기 Ver_2 ※ 화면 너비 1220px 초과 width 100%, 전체 영역 차지 ※ 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px){ aside { width: 40%; } section { width: 60%;} article { width: 100%; height: 300px; float: none; clear: both;} } aside 영역이 전체 너비의 40%, section 영역이 전체 너비의 60%를 차지하며, article은 아래로 내려간다. ※ 화면 너비 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 788px){ aside { width: 100%; } s..

layout 만들기 Ver_1 시맨틱 태그 참고 : https://despiteallthat.tistory.com/57 [HTML] 시맨틱 웹(Sementic Web) / 시맨틱 태그(Sementic tag) 오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 [ 시멘틱 웹 ] 시멘틱 웹이란? 시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 despiteallthat.tistory.com ※ 화면너비 1200px 초과 #wrap의 영역의 width 1200px ※ 화면 너비 0 ~ 1200px @media (max-width:1200px){ #wrap { width: 98%; } } #wrap 영역의 width 전체..

미디어쿼리에 대해 알아보자 [ 미디어쿼리 ] 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술이다. @media only all and (조건문) {실행문} @media : 미디어 쿼리가 시작됨을 표시한다. only : 미디어 쿼리 구문을 해석하라는 명령어이다. (생략가능) all : 미디어 쿼리를 해석해야 할 대상을 나타낸다. (생략가능) all : 모든 미디어 유형해서 사용할 CSS를 정의 print : 인쇄 장치에서 사용할 CSS를 정의 screen : 컴퓨터 스크린에서 사용할 CSS를 정의 aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의 tv : TV에서 사용할 CSS를 정의 handheld : 손에 들고 다니는 장치를 사용할 CSS를 ..

텍스트를 세로로 표시하는 법을 알아보자 // 세로로 왼쪽 -> 오른쪽 writing-mode: vertical-lr; // 세로로 오른쪽 -> 왼쪽 writing-mode: vertical-rl; // 영어는 추가로 작성 text-orientation: upright; writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있다. 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시된다. 이를 해결하는 방법으로는 text-orientation 속성을 이용하면 된다.

정규표현식에 대해 알아보자 [ 정규 표현식 ] 정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 예시 const cellphone = '010-1234-1224'; console.log( /^\d{3}-\d{3,4}-\d{4}$/.test(cellphone)); // true 위와 같이 핸드폰 번호를 입력받아 번호 양식에 맞는지에 대한 여부를 확인할 수 있다. 정규표현식을 사용하면 반복문과 조건문 없이 ..

디자인하기 전 알아야 하는 UI 기술 지식에 대해 알아보자 용어 설명 스크린 사이즈 (screen size) 화면의 대각선 길이, 단위는 인치 해상도 (resolution) 화면의 총 픽셀 수 ppi (pixels per inch) 화소 밀도, 디스플레이에서 인치당 픽셀 수 dpi (dots per inch) 픽셀 밀도, 화면의 실제 영역 내에 있는 픽셀 수 dp (density-independent pixels) 안드로이드 사이즈 단위. 화면 크기와 해상도가 달라도 레이아웃을 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위 sp (scale-independent pixels) 안드로이드 텍스트에서만 사용하는 단위. dp와 동일한 비율 pt (point) iOS 사이즈 단위. dp와 같은 역할 해..

조건문을 이용하여 반응형 웹을 만들어보자 [ _responsive.scss ] @mixin responsive($device){ @if $device == "maxDesktop" { @media screen and (min-width: 1024px){ @content; } } @else if $device == "minDesktop" { @media screen and (min-width: 768px) and (max-width: 1023px){ @content; } } @else if $device == "tablet" { @media screen and (min-width: 480px) and (max-width: 767px){ @content; } } @else if $device == "phone..

grid layout 연습을 할 수 있는 Grid Garden라는 사이트를 소개해보고자 한다. https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS grid 속성을 이용하여 28문제를 풀어나가면 된다. 특별하게 어려운 건 없었지만 template를 row나 column으로 나눌 때 auto의 의미를 잘 파악해야 할 것 같다!

flex layout 연습을 할 수 있는 Flexbox Froggy라는 사이트를 소개해보고자 한다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이 사이트에는 flex layout에 대한 각종 연습을 할 수 있다! justify-content, align-items, align-self, align-content, flex-direcion, order 등을 이용하여 단계별로 개구리를 배치하면 된다. 한국어로 번역해서도 볼 수 있으니 flex layout을 연습할 때 참고하길 바란다. :) 개인적인 리뷰로는 24단계까지 있는데 24단계에서 막혔다 ㅎ 막힌 이유는 내가 모르는 속성? ..

글자를 drag 하면 확대된 말풍선을 보여주는 코드를 만들어보자 조건 : 1. 내가 드래그한 단어 및 문단은 형광펜으로 처리한다. 2. 드래그한 단어를 확대해서 말풍선으로 드래그 영역 끝부분에 보여준다. 3. 말풍선을 누르면 말풍선이 꺼진다. HTML 더보기 가슴속에 그리고 피어나듯이 이름자를 있습니다. 우는 쉬이 추억과 노새, 어머님, 하나에 새워 청춘이 있습니다. 멀리 슬퍼하는 덮어 토끼, 하나에 아침이 위에 버리었습니다. 계집애들의 헤일 지나고 했던 내 노루, 위에 같이 흙으로 거외다. 이름과, 하나의 우는 벌써 책상을 봅니다. 내린 않은 하나에 별 내 잠, 보고, 봅니다. 하나에 별 토끼, 슬퍼하는 쉬이 까닭입니다. 없이 어머님, 위에도 까닭입니다. 자랑처럼 하나에 가을 무덤 나의 까닭이요, 없이..

마우스 이벤트에 대해 알아보자 [ mousedown ] 마우스 버튼을 누르는 시점에 발생하는 이벤트 [ mouseup ] 마우스 버튼을 떼는 시점에서 발생하는 이벤트 [ mousemove ] 마우스를 움직이는 시점에서 발생하는 이벤트 [ mouseenter ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 [ mouseleave ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 ※ 포인팅 디바이스 마우스, 터치 패드 등을 가리킴 [ mouseover ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 (이벤트 버블링) [ mouseout ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 (이벤트 버블링) ※ mouseover와 mouseout 이벤트는 포인팅 디바이스(마우스..