Bumlog

브라우저 / 테블릿 / 모바일 반응형 헷갈렸던 부분 테블릿과 모바일 부분에서 자꾸 가로 스크롤이 생겼다. 문제는 처음에 부모요소와 자식요소 모두에 width가 rem 등으로 지정되어 있어서 발생한 듯 하다. 부모요소에 width:100vw를 주고 자식요소에 width를 삭제 해주니 문제가 해결되었다. 참고영상 보기 이 2가지 영상을 보고 참고해서 다시 작성해보는 것도 좋은 방법일 듯 하다. https://www.youtube.com/watch?v=xWMKz9NCD0k https://www.youtube.com/watch?v=AfxL9OKBBCU&start=3

블록요소 자체를 페이지 정중앙에 배치(absolute 사용) position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); position:absolute는 부모 엘리먼트 위치를 기준으로 절대적인 위치 값 설정이 가능합니다. left와 top을 50%로 설정해 중앙에 정렬. => 이때 해당 요소의 좌측상단이 중앙에 오게 됩니다. transform: transition(-50%,-50%)로 해당 요소의 좌측상단이 아닌 정중앙이 페이지 중앙에 오게 만듬. 이때 transition의 값은 (x축, y축)을 의미합니다. 궁금한점 왜 블록요소가 갑자기 인라인요소처럼 변하는 걸까? 해결 absolute 선언 시, block 레벨 요소의 widt..

HTML CSS /* animaion */ @keyframes 귀오른쪽 { from { transform: rotate(30deg); } to { transform: rotate(40deg) translate(10px); } } @keyframes 귀왼쪽 { from { transform: rotate(-30deg); } to { transform: rotate(-40deg) translate(-10px); } } /* setting */ :root { --pri: #ce705f; --sec: ivory; } /* reset */ body { margin: 0; padding: 0; } /* layout */ /* design */ *, *:after, *:before { box-sizing: borde..

우선 overflow:hidden 은 HTML5이고, display:none은 CSS이다. 관련 내용은 스택오버플로우의 내용을 참고했다. 실제로 웹브라우저에 보여지는 부분에서는 hidden이나 display:none이 차이가 없다고 한다. 하지만 유일한 차이점은 "접근성"이다. display:none의 경우 스크린리더로 읽을 때, 읽히지 않지만, hidden 같은 경우는 읽힐 수 있다는 것이다. https://stackoverflow.com/questions/6708247/what-is-the-difference-between-the-hidden-attribute-html5-and-the-displaynone What is the difference between the hidden attribute (..

아래 문제를 풀어보세요. Apple Mango Banana Melon Strawberry 위의 마크업에서 .a + li { background:red;} li + li + li { font-size:30px;} 어떤 li가 빨간배경? 어떤 li가 글자크기가 변경될까요? 그 이유는요? 정답 빨간배경: Banana Melon 이유: +는 인접 형제 셀렉터이다. 따라서 .a 요소의 바로 다음에 위치한 형제 요소인 부분에 스타일을 적용해준다. 따라서 a클래스인 망고와 바나나의 다음 li요소인 바나나 멜론이 각각 스타일의 적용을 받는다. 글자크기 변경: Banana Melon Strawberry 이유: 위와 같은 이유로, li의 다음 형제 요소인 li의 또 다음 형제 요소는 스타일의 적용을 받는다. 따라서 첫번째..

나의 답변 1. 4개 2. 2개 3. 3개 4. div.box -> 2개 (div,wrap,div.box) 5. 3개 6. 1개(div.box) -> 2개(div,wrap,div.box) 7. 1개 (em을 포함하고 있는 마지막 span테그)

을 이용하여 달력을 만들어보자! 오늘 배운 을 이용하여 달력을 만들어보았다. 현재 일 수를 하나하나 적어넣는 방식으로 만들었다. 3월 부터 일수를 하나하나 지정하는 것이 너무 불필요한 것처럼 느껴져서 작업하지 않았다. 나중에 JS나 React를 이용하면 훨씬 쉽게 달력을 만들 것 같으니, 테이블을 HTML Tag로 만들 수 있는지에 집중하는 것이 효율적일 듯 하다. HTML코드 더보기 2022 Act as if it were impossible to fail 실패가 불가능한 것처럼 행동하라 1 SUN MON TUE WED THU FRI SAT 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 2 SUN M..

1. Git 1.1 Git이란? Git은 "버전관리도구"입니다. "버전관리도구"란 코딩할 시, 수정을 할 때마다 새로운 버전을 업로드하고 이전 버전과 현재버전까지 모두 저장하고 관리해주는 도구를 말합니다. 코딩을 하다 보면 때때로 롤백(이전 상태로 돌아감)이 필요한데, 이때 버전관리도구를 통해 수정하지 않음 이전 버전을 다운로드 받을 수도 있습니다. 1.2 Git의 구성 Git은 로컬 저장소(내 컴퓨터)와 원격 저장소(서버 컴퓨터)로 나뉩니다. 내 컴퓨터에서 작성한 프로젝트를 원격 저장소에 저장해두고, 만약 내 컴퓨터의 프로젝트가 손상되거나 다른 컴퓨터에서 코드를 가져오고 싶을 때는 원격 저장소에서 바로 가져올 수 있습니다. 이때, 코드 뿐만 아니라 코드의 변경 내역까지 모두 가져올 수 있기 때문에 Gi..

Grouping Content의 개념과 구성 Grouping Content 는 그룹핑을 하는 테그의 명칭을 의미한다. 사람에게도 머리, 목, 몸통, 팔, 다리 등 구성이 있듯이, 웹페이지에도 구성이라는 것이 존재한다. *그룹핑을 어떻게 하느냐에 따라 설계자가 어떤 생각과 관점으로 이렇게 그룹핑을 했구나 느낄 수도 있다. 아래는 일반적으로 어떻게 그룹핑을 나누는지에 대한 그림이 있다. 일반적으로 Div 태그를 이용하여 만들 수도 있지만, Div는 어떠한 의미도 지니고 있지 않다. 그저 덩어리(?) 인 것이다. 의미를 가진 태그(예, Header - Main - Section - Article - Footer)를 이용하여 머리, 몸통, 다리 등을 표현하는데 갑자기 덩어리(?)를 넣어버리면 구성이 조잡해 보인..