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 = docume..
-
[ CSS ] transform과 좌표계HTML & CSS/이론 2023. 1. 9. 22:45
뷰포트와 좌표계 모든 뷰표트는 좌표계라 할 수 있으며 좌측 상단을 원점으로 합니다. 아래의 그림은 좌표계를 시각화해서 나타낸 것인데 약간의 실수가 있으니 각 축이 가지는 이동 및 회전의 방향만 확인하시기 바랍니다. transform 적용에 따른 좌표계 이동 css를 사용해 각 요소에 transform을 적용한다면 각 요소는 로컬 좌표계를 생성하고 원점을 각 요소의 50%, 50% 지점으로 정의합니다. 이러한 로컬 좌표계의 원점은 transform-origin 속성을 통해 조작가능합니다. css에서의 변형은 기본적으로 transform matrix와의 연산을 통해 이루어집니다. matrix의 연산에서 교환법칙은 성립되지 않으므로 각 transform의 적용 순서에 주의해야합니다. 아래 그림에서와 같이 ro..
-
[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의 특징을 보여준다. 그림에서 확인할 수 있듯이 ..