개념 HTML의 문자(내용) 수정하기 html 코드의 id 값을 이용하여 자바스크립트로 코드를 수정할 수 있다. document.getElementById("apple").innerHTML = "apple"; 원래 p 태그에 아무 내용도 없었지만, 자바스크립트로 위와 같이 입력해주면 "apple"이라는 단어가 출력된다. 만약, p 태그에 다른 내용이 있었더라도 innerHTML을 이용하면 해당 값으로 수정된다. CSS의 color 속성 수정하기 Hello! Click // 1. h1의 색깔 수정하기 document.getElementById("bow").style.color = "red"; // 2. 버튼을 눌렀을 때 h1의 색깔이 변경 function btn() { document.getElementB..

문제 지금부터 상상을 한번 해보자. 하나의 부모 태그 아래에 여러 개의 자식 태그가 있다. 우리가 흔히 보는 메뉴바처럼 그 자식 태그는 똑같은 너비로 부모 태그를 꽉 채우고 있다. 이걸 만드려면 어떤 태그를 쓰는 게 좋을까? 답은 정해져 있지 않다고 생각한다. 왜냐하면 개인적으로 좋은 코딩은 있다고 생각하지만, 결과가 다르지 않는 이상 틀린 코딩은 없다고 생각하기 때문이다. 하지만, 조금이라도 좋은 코딩을 하기 위해선 지금 내가 블로그에 기록하며 공부하는 것처럼 여러 개의 코드 중에 좋은 코드를 구별해낼 수 있어야 하고, 그러기 위해서는 하나의 문제에 여러가지 답을 많이 알면 알수록 좋다고 생각한다. 위의 문제를 해결하는 방법은 많지만, 그 중 하나인 display: table를 소개하려고 한다. (실무..

문제 CSS만을 이용해서 위와 같은 결과물을 만들려고 한다. 이 결과물을 만드는 데 2가지 과정이 필요하다. 1) 목록에 밑줄을 만들어야 한다. 2) hover 값을 줘야 한다. (transform 사용) 이 게시물은 1번에 해당하는 과정을 설명하는 글로, 2번 과정은 따로 transform 속성 정리글에서 다루겠다. 먼저, 밑줄을 만드는 경우의 수는 많다. 해당 글씨가 들어간 태그에 border-bottom을 줘도 되고, li에 padding-bottom 값을 준 후 border-bottom을 줘도 된다. 메뉴에 어떤 태그를 썼냐에 따라 방법은 무수히 많다. 하지만, 위와 같이 주게 되면 부작용이 있다. border에도 1px처럼 크기가 있기 때문에, 위처럼 hover를 주는 경우 글씨가 갑자기 올라가..

문제 공간은 제약되어 있고, 그 안에 내용은 넘치게 되는 경우 내용이 공간을 넘어가는 부작용이 일어나게 된다. 그럴 때 해결하는 방법은 내용에 말 줄임표 효과를 줘서 공간이 넘어가는 순간 '...'으로 표기하게 만드는 것이다. 해결 한 줄 말줄임표 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it. html은 한 줄 말 줄임표 or 두 줄 이상 말 줄임표 모두 위와 동일하게..

문제 내가 만들고 있는 웹사이트에 유튜브 영상을 넣고 싶다면, 어떻게 해야할까? 퍼가고 싶은 유튜브 영상을 우클릭 후 '소스 코드 복사'를 누르고 html에 그대로 붙여넣기해주면, 간단하게 유튜브 영상을 웹 내부에 옮길 수 있게 된다. 그런데 반응형 웹사이트에서는 이대로 끝나게 되면, 반응형에 맞춰 영상이 움직이기 보다는 영상 본래 크기 그대로, 검은 여백 그대로 보이게 돼서 반응형에 깔끔하게 떨어지지 않게 보인다. 웹사이트를 늘리고 줄일 때 마다 영상이 검은 여백없이 딱 떨어지게 하고 싶으면 어떻게 해야할까? (▲ 반응형 웹사이트에서 늘리고 줄여도 유튜브 영상 내에 검은색 여백없이 딱 떨어지는 모습) 해결 마법의 숫자 56.25% html은 전체 div인 video_box 클래스 안에 유튜브 소스 (i..