HTML & CSS
-
[ JS ] JS에서의 Attribute와 PropertyHTML & CSS/이론 2023. 2. 8. 11:54
자바스크립트에서 attribute와 property는 자주 동일한 의미로 사용되지만 실제론 약간의 차이를 가집니다. 먼저 attribute의 경우 html 문서에 정의된 속성이라 할 수 있으며, 각 속성의 기본값을 제공합니다. 즉, 아래 코드의 input의 경우 type, id, value는 input 요소의 attribute라고 할 수 있으며 정적입니다. property의 경우 attribute에 할당된 현재의 값이며 html dom tree에 정의되어 있습니다. property는 attribute와 달리 js를 통해 조작가능한 동적인 값입니다. 아래 js 코드에서는 input 요소의 value property를 통해 value에 접근하고 변경합니다. const input = document.query..
-
[ CSS ] transform과 좌표계HTML & CSS/이론 2023. 1. 9. 22:45
뷰포트와 좌표계 모든 뷰표트는 좌표계라 할 수 있으며 좌측 상단을 원점으로 합니다. 아래의 그림은 좌표계를 시각화해서 나타낸 것인데 약간의 실수가 있으니 각 축이 가지는 이동 및 회전의 방향만 확인하시기 바랍니다. transform 적용에 따른 좌표계 이동 css를 사용해 각 요소에 transform을 적용한다면 각 요소는 로컬 좌표계를 생성하고 원점을 각 요소의 50%, 50% 지점으로 정의합니다. 이러한 로컬 좌표계의 원점은 transform-origin 속성을 통해 조작가능합니다. css에서의 변형은 기본적으로 transform matrix와의 연산을 통해 이루어집니다. matrix의 연산에서 교환법칙은 성립되지 않으므로 각 transform의 적용 순서에 주의해야합니다. 아래 그림에서와 같이 ro..
-
[HTML & CSS] 드롭다운 메뉴 (Toggle)HTML & CSS/실습 2022. 12. 23. 22:27
이번에는 토글기능을 적용해 아래와 같이 html, css만을 이용해 드롭다운 메뉴를 만들어봤다 See the Pen Dropdown menu (toggle) by OnnJE (@ogtitle) on CodePen. 다시볼때 이해하기 쉽게 만들면서 느꼈던 핵심적인 부분만 정리해 봐야겠다. input & label 위 태그에서 input과 label은 위의 코드와 같이 사용되었다. input은 type을 checkbox로 설정하여 체크(toggle) 여부를 판단할 수 있게 하였고, label은 for 속성으로 위 input의 id를 지정해 바인딩 했다. 따라서 라벨을 클릭해도 input에 체크가 된다. 라벨태그 자체를 css로 조작할 수 있어 이번 드롭다운메뉴는 label을 클릭시 인풋이 체크되고 드롭다운 ..
-
[HTML & CSS] 드롭다운 메뉴 기본HTML & CSS/실습 2022. 12. 18. 22:49
node.js 기본을 익히고 이제 웹 페이지를 제작하려던 찰나 드롭다운 메뉴 하나도 빠르게 만들지 못하는 내 자신을 발견했다. 정작 중요한게 아니라 다른걸 열심히 파고 있었단걸 깨닫고 fe의 기본인 html, css, js의 기본을 다시 탄탄히 하고자 한다. 일단 실패한 드롭다운 메뉴부터 시작해야지... See the Pen Untitled by OnnJE (@ogtitle) on CodePen. 일단 만든건 위와 같다. 이게 처음 막 하다보니 어떻게 원리를 적용해 드롭다운을 구현할지 생각보다 쉽지 않았다.. 그러니 나중에 봐도 쉽게 이해할 수 있게 핵심적인 부분을 정리해 보자. 1. 구현은 가장 깊숙한 요소부터 실제 구현을 해보니 가장 아래의 요소 (위 드롭다운 메뉴의 경우 a 태그)부터 구현하는게 훨..
-
[HTML & CSS] 네이밍 규칙HTML & CSS/이론 2022. 12. 18. 18:50
HTML 문서를 작성할 때 각 태그들을 구분하기 위해서 id 혹은 class가 주로 쓰인다. 이러한 속성들을 보다 효과적으로 쓰는 방법은 무엇일까 고민하며 구글링을 해보다 다음과 같은 아래와 같은 사이트를 찾게 되었다. TPL+Code Style Guide 이 사이트에서 정리한 내이밍 규칙은 아래와 표와 같다. 네이밍 규칙 외에도 코딩 컨벤션, 레이아웃 등에 관한 글이 있으니 참고하면 좋겠다. 공통 규칙 [ 형태 + 의미 + 상태 ] 순서로 조합한다. - 이름의 시작은 소문자 혹은 _ 만 사용한다. - HTML / CSS id => camelCase 사용 menuMain class => - 사용(snake_case와 유사) btn-login-off File [ 형태_의미_상태 ]와 같이 언더스코어를 사용..
-
[HTML & CSS] 페이지 body 요소 기본 설정HTML & CSS/이론 2022. 12. 17. 20:25
이번 글에서는 freeCodeCamp의 HTML vs Body: How to Set Width and Height for Full Page Size이란 칼럼의 설명을 정리하고, 해당 글에서 소개된 각 케이스를 직접 확인해보며 어떤 설정이 가장 좋을지 생각해 보려 한다. * { margin: 0; padding: 0; box-sizing: border-box; } 각 케이스를 비교하기 전에 위 코드와 같이 전체 요소의 margin, padding을 0으로 세팅하고 box-sizing 속성을 border-box로 설정하는 것을 추천한다. 이러한 기본 세팅은 각 요소에 대한 추가적인 조작을 줄여준다. 아래 그림은 box-sizing의 속성 값 border-box의 특징을 보여준다. 그림에서 확인할 수 있듯이 ..