AimHo

Sass란??Sass 공식 문서를 살펴보면 'CSS에 우아함을 더해주는 확장 언어이다.' 라고 스스로를 묘사하고 있습니다. CSS는 배우기에는 매우 간단하지만, 여러 스타일을 지정하다보면 코드가 지저분해지기 쉽습니다. 코드의 양이 많을 수록 더욱 그렇죠하지만, Sass는 최대한 CSS의 기능을 유지하면서 부족한 부분만을 도와줍니다 그래서 Sass는 CSS를 사용하던 사람들이 배우기에 어렵지 않습니다. 그저 몇 가지 기능만 추가해서 사용하면 됩니다. Sass or SCSSSass라고 검색을 하면 보통 SCSS도 같이 검색이 됩니다. 두 가지 모두 같은 기능을 갖고 있습니다. 차이는 그저 미관상의 문제인데, Sass는 스타일을 적용할 때 중괄호, 세미콜론 그리고 들여쓰기에 의존하여 간결하고 짧은 코드를 작성..

SideProject #1 Todo-list앞으로 일주일에 한~두개 씩 큰 작업이든 작은 작업이든 상관 없이 SideProject를 하려고 한다. 공부하면서 그냥 강의들을 따라 하는 것 보단 이렇게 뭔가를 제작하는게 더 도움이 된다는 걸 느껴서... 아무튼 유투브에서 어느 프로그래머의 영상을 보다가 자바스크립트 공부를 마쳤으면 다른 프레임워크들을 사용하기전에 자바스크립트만 이용해서 무언가 만들어보라고 한 말이 생각나서 첫번째 SideProject로 todo-list를 제작해보았다. 디자인은 정말 심플하다. (디자인 감각이 부족해서...)처음에 타이틀로 'Todo-List'라고 되어있고 아래 버튼이 4개 있는데 3개는 필터 역할을 하는 버튼이고 1개는 list를 추가하는 버튼이다. 버튼 밑에는 list와 ..

CSS 속성공부 #6 / 위치(position) 속성 보통 프로그램을 개발할 때 요소의 위치는 다음 두 가지 방법으로 설정한다. 절대 위치 좌표: 요소의 X 좌표와 Y 좌표를 설정해 절대 위치를 지정함.상대 위치 좌표: 요소를 입력한 순서에 따른 상대 위치를 지정함.절대 위치 좌표는 드래그해서 만들 수 있으므로 상대 위치 좌표보다 개발이 쉽다. 하지만 현대에는 사람들이 각기 다른 디바이스(모바일, PC)에서 사용하므로 해상도가 고정되어 있지 않다. 따라서 상대 위치 좌표를 대부분 사용한다. 그렇다고 절대 위치 좌표가 쓰이지 않는 것은 아니다. 절대 위치 좌표는 일정 크기의 영역을 지정한 태그 내부에서 많이 사용한다. position 속성 이제 실습을 통해 position 속성을 익혀보자. 100x100 ..

CSS 속성공부 #3 / display 속성HTML5가 등장하면서 display 속성에 입력할 수 있는 다양한 키워드가 등장했다. 하지만 모든 display 속성을 제대로 지원하는 웹 브라우저는 아직 없다. 그러므로 우리는 모든 웹 브라우저가 지원하는 display 속성을 중심으로 살펴보도록 하자. 여기서 다룰 속성 키워드들은 다음과 같다. 1. none: 태그를 화면에서 보이지 않게 만듦. 2. block: 태그를 블록 형식으로 지정함. 3. inline: 태그를 인라인 형식으로 지정함. 4. inline-block: 태그를 인라인-블록 형식으로 지정함. 실전예제 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 ..

CSS 속성공부 #2 / 박스에 대해 알아보자 / AimHo이번에는 웹 페이지의 레이아웃을 구성할 때 가장 중요한 박스에 대해 공부하려 한다. 박스는 아래 이미지에 표시된 속성을 모두 합쳐 박스 속성이라 이야기한다. 이미지출처: 한빛미디어 width, height 속성 여기서 글자를 글자라고 생각하면 된다. width와 height는 글자를 감싸는 영역의 크기를 지정한다. 단어 해석만 해봐도 어떤 속성인지 쉽게 알 수 있을것이다. margin, padding 속성 margin과 padding는 웹 페이지에서 여백을 만들때 많이 사용한다. 박스속성을 설명한 이미지를 다시 확인해보자. margin, padding의 차이가 보이는가?? 두 속성 모두 여백을 만드는 속성이지만, 테두리를 만드는 border를 기..

CSS 입문 / CSS 선택자에 대해 알아보자!HTML 항목의 [간단한 웹 페이지 만들기!] 글을 기억하는가? 저기서 웹 페이지는 굉장히 투박한 모양을 하고 있다. 저 투박한 웹 페이지에 앞으로 공부할 CSS(Cascading Style Sheets)를 적용해야 이쁜 웹 페이지를 완성할 수 있다. HTML 첫 글에서 언급했었는데, 네이버도 CSS가 빠지게 되면 투박한 형태로 보여지게 된다. 이제 CSS를 공부해볼건데, 가장 기본인 CSS 선택자를 다뤄보려고 한다. 실질적으로 화면에 있는 무언가를 조작하는 것이 아니므로 지루하게 느낄 수도 있지만, CSS 선택자를 모르면 이후의 내용을 진행할 수 없으니 차근차근 익혀보기를 바란다. CSS 선택자란? CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는..