프로그래밍 공부하기

1. DOM의 정의 DOM(Document Object Model)이란 HTML, XML 문서의 프로그래밍 Interface이다. DOM은 문서를 프로그래밍 언어로 접근하고 조작가능하게 하는 모델이다. JavaScript DOM을 통해 HTML요소에 접근하고 조작할 수 있다. 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 2. DOM과 웹 브라우저 DOM은 작성한 HTML가 웹 브라우저에 의해 파싱된 것이다. 즉, 웹 브라우저에 DOM이 포함되어있는 것이다. 따라서 DOM은 웹 브라우저의 최상위 객체인 window의 하위 객체이며 window.document로도 HTML에 접근 가능하다. Javascript에서 window 객체를 사용한다는..

seesparkbox.com/foundry/naming_css_stuff_is_really_hard CSS Class Names to Prevent Refactoring Limit gross refactoring tomorrow by picking class names that are less likely to change. Ethan shares three naming options to help cushion the blow of future design changes. seesparkbox.com 코딩을 하면서 가장 어려운 것 중 하나는 이름짓기이다. C#, Java, Javascript 등의 언어의 변수, 함수 등의 이름짓기는 어느정도 아는 지식이 있지만 CSS의 class와 id는 무엇을 기준으..

1. 구글 폰트 사이트에서 원하는 폰트를 찾는다. fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 폰트를 선택한 후 Select this style을 선택한다. 3. 상단 우측의 사각형 버튼(View your selected familes)을 눌러 우측에 Selected Family 메뉴가 보이게 한다. 4. Use on the web의 링크와 CSS를 복사하고 링크는 html 파일에, CSS는 css파일에 넣어 사용한다.

오늘 CSS 작업을 하던 중 last-child가 생각대로 작동하지 않는 상황을 발견하였다. 해당 요소가 문제가 있나 싶어서 nth-child()로 선택을 했더니 이건 또 선택이 됐다. 이를 검색해보니 다음과 같은 결론을 얻었다. "마지막 자식 아래에 또다른 요소가 존재한다면 last-child는 사용할 수 없다." 이 상황을 코드로 나타내면 다음과 같다. See the Pen yLaXMRK by ImHyeLim1209 (@imhyelim1209) on CodePen. a:last-child는 a 태그의 마지막 자식 즉 Last Tag 부분이 #00ff00 색으로 바뀔 줄 알았지만 실제로는 동작하지 않았다. a 태그 아래에 div 태그가 존재하기 때문이다! a태그의 마지막 부분을 선택하기 위한 해결방법은..

*{ box-sizing: content-box; /*box-sizing: border-box;*/ } #box1{ border:10px solid red; width: 100px; } #box2{ border:30px solid blue; width: 100px; }​ Box_Test Box_Test [결과] box-sizing: content-box (기본 값)일 때 결과 box-sizing: border-box일 때 결과

UI를 만들 때 고민되는 것 중 하나는 크기 단위를 어떻게 잡을 것인가 이다. 페이지의 타겟이 모바일인지 PC인지에 따라서, 같은 페이지여도 메뉴 등 크기를 고정시키고 싶은 요소는 화면 크기 상관 없이 고정값으로, 그 외 요소는 화면 사이즈에 따라 변하게 만드는 등 용도에 따라 다른 단위를 써야할 수 있다. 1. 절대적인 크기: px -사용자 디바이스 기본 크기 설정과 상관없이 크기 설정 -강조하기 위해 큰 크기(px)로 지정했는데 사용자에 따라 지정하지 않은 글꼴보다 작은 크기가 될 수도 있다. -모바일 처럼 작은데 고해상도인 환경의 경우 1px이 모니터의 한 점보다 크게 업스케일되므로 문제가 생길 수 있다. 2. 보통의 경우: rem -사용자 디바이스 기본 크기 설정을 기준으로(1rem) 크기를 지정..

div: 단순히 영역을 묶어주는 역할(의미X) article: 독립적으로 존재하는 내용 블록 article 부분만 독립적으로 봤을 때 이해 가능하며 이 부분만 떼서 다른 페이지에 끼워 넣을 수 있다. ex. 블로그 포스팅 section: 다른 블록들과 관련이 있는 요소일 때 사용. 큰 묶음(단위)인데 다른 블록과 관련이 있을 때.. ex. 연속된 정보 그룹 section의 깊이에 따라 같은 h1태그여도 크기가 다르다. See the Pen section_tag by ImHyeLim1209 (@imhyelim1209) on CodePen. 하지만 결과가 이렇게 나온다고해서 section태그 깊이에 상관없이 h1태그만을 사용하는 것은 좋지 않다. 같은 크기의 텍스트여도 접근성 검사기능으로 확인했을 때 sec..