오열매의 코딩 공간

media query는 반응형 페이지를 만들 때 필수 요소이다. 예를 들면, 페이지의 크기에 따라 웹 사이트 내부의 요소들의 크기나 배치가 달라지는 것 등이 있다. 주로 PC, 모바일, 가로모드, 세로모드, 휴대폰 기종 등에 따라 달라지게 한다. 위와 같은 상황에서 미디어 쿼리를 사용하는 것이 실용성이 좋지만, 일단은 기본 사용법에 대해서만 알아본다. 사진 2개를 같이 보면서 봐야 한다. 왼쪽의 html 파일에서, main 태그에 쌓인 부분은 두 번째 사진에서의 가운데에 속한다. 일반적이 글이 보인다. 이를 css 파일에서 media query를 통해 최대와 최소 너비에 대한 조건을 부여했다. max-width: 최대 너비. (최소 너비를 설정하지 않았다면, 0부터 해당 너비까지) ... 예제에서는 80..

간단하게 예제를 통해 핵심만 설명한다. 첫 번째 사진의 코드를 적용시킨 결과가 두 번째 사진이다. html의 body 태그쪽을 보자. 첫 번째 태그는 너비와 높이를 설정하지 않은 block, 두 번째 태그는 너비와 높이를 설정한 block, 세 번째 태그는 너비와 높이를 설정한 inline, 네 번째 태그는 너비와 높이를 설정한 inline에 display:block; 특성까지 설정했다. 결론만 말하자면, inline은 너비와 높이를 가지지 않는다. 아무리 설정해줘도 변경할 수 없다. 너비와 높이는 오직 block만의 특권이다. 따라서, 너비와 높이를 이용하기 위해서는 display:block 이 기본이 되어야 한다. 다행히도 inline 태그는 몇 종류 없다. 아래의 주요 태그들만 알아놓고 나머지는 다..

fCSS-Hack에 관한 코드다. 정석적인 방법은 아니라, 사용자들이 브라우저의 오류를 해결하기 위해 연구해서 공유된 내용임을 미리 알린다. 실제 예시 코드를 이용하여 알아본다. 하나의 컨테이너에 3개의 칼럼이 있는 상황. 원래는 컨테이너에 justify-content: space-between 을 부여하여 배치하려 하는데, 가운데 요소가 화면의 정중앙에서 약간 벗어나는 상황이다. 그래서 아래와 같은 css 코드를 사용한다. 참고로 SCSS를 사용했다. CSS로 사용하려면 상위 태그로부터 따로 분리해내어 독립적으로 선언하고, &의 뜻은 해당 태그라는 뜻이다. 예를 들면, div{ &:hover { ~ } } 는 div:hover{ ~ } 와 같은 뜻이다. 위 코드를 실행하면, 처음에 의도한 space-b..

box-sizing 특성의 실용적인 측면만 포스팅 한다. 간단하게 원래의 특성에 대해 말하자면, box-sizing은 'Box의 크기를 어떤 것을 기준으로 계산할지'에 대한 것이다. content-box : 콘텐트 영역을 기준으로 크기를 정함 border-box : 테두리를 기준으로 크기를 정함 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 defalut는 content-box 이다. 하지만 content-box의 문제점이 있다. 기존의 특정 Box에 Padding 값을 부여한 상태에서 해당 Box 안의 요소에 특정 너비값을 준 경우가 그 예시에 속한다. 실제 실습 예시이다. 원래는 아이콘 4개가 보여야 하는데, 하나가 화면 밖으로 사라졌다. 이미 Padding으로 50p..

말 그대로, 클래스 명명법을 통해 html 태그를 구성하는 방식이다. 빠르게 실제 예시를 통해 살펴본다. 위 사진은 html 태그를 생성할 때, 특정 태그에 속하는 모든 자식 태그들을 상위 태그의 클래스명을 포함하여 명명한 사진이다. (간단하게 이러한 방식을 BEM 이라고 생각하면 된다.) 실용적인 측면만 살펴보자면, 이처럼 클래스명으로 구분하는 것이 나중에 해당 요소에 대한 유지보수가 용이하다. CSS 코드로 보면 직관적으로 어떤 부분에 대한 코드인지도 한 번에 알 수 있다. 참고로, 위 코드는 SCSS를 적용했을 때의 코드 형태이다. 단점은 클래스명을 센스있게 짓기가 까다롭다는 점이다. 이는 코딩 실력과는 무관한 다른 영역인 것 같다. 하다보면 노하우가 생길 것이다. BEM 방식을 SCSS와 결합하여..

구글에서 제공하는 무료 폰트와 아이콘을 이용할 수 있는 사이트를 찾았다. 1) Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 링크로 접속해서 원하는 폰트를 찾는다. 폰트를 선택하고 들어가서 아래를 살펴보면 Styles 라는 부분이 나온다. 굵기별로 구분되어 있다. 원하는 굵기를 우측의 + 버튼을 눌러서 추가한다. 추가하면 우측에 내가 추가한 내용들에 대한 팁들이 생긴다. 아래의 Use on the web 에서 @import를 누른다. (link를 이용하는 방식보다 깔끔하다.) 태그 안의 내용들과, 아..

브라우저에는 기본적인 CSS 요소가 있다. 위 사진처럼, body 태그에는 테두리에 8px 이 기본적으로 설정되어 있다. 이 외에도 다수 있는데, 이러한 것들에 영향을 받지 않고 온전히 나의 코드로만 사이트를 꾸미기 위해서는 기본 설정들을 초기화 하는 코드가 필요하다. 이를 Reset.css 라고 한다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code..

Sass란 Syntactically Awesome Style Sheets의 약자이다. CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다. sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다. 설치 과정) 1. git 설치: https://git-scm.com/ Git git-scm.com 2. NodeJS LTS 설치: https://nodejs.org/en/ N..

요소들을 움직이고 변형시키고 애니메이션을 만드는 방법에 대해 정리한다. Transition과 Transformation은 State 와 엮어서, 특정 상태에서만 나타나게 하는 방식으로 쓰인다. 예를 들면, 마우스를 올려 놨을 때 한 바퀴 돌아간다든지 등이 있다. Animaition은 State와 관계 없이 지정한 시간 또는 계속해서 Transition과 Transformation을 적용시키는 방식이다. 1) Transition /* transition: */ transition: margin-left 4s ease-in-out 1s; property name에는 background-color, margin, border 등의 다양한 특성들이 들어갈 수 있다. 변화시키고 싶은 모든 대상들을 넣으면 된다. ..

방대한 양의 코드를 사용하다보면, 반복되는 코드들이 있다. 예를 들면, 위 예시처럼 background-color 라는 property에서 wheat, tomato 등으로 이름이 정해진 경우에는 상관 없지만, rgb(252, 201, 65) 처럼 다른 표현을 이용하여 색을 나타낸다면? 코드도 지저분해지고 귀찮아진다. 이럴 때 var()를 활용한다. :root{ } 에 사용할 변수를 정의하고(변수명 앞에 -- 를 붙여야 한다.), 이 변수명을 var( ) 안에 넣어 활용하면 된다. 참고) https://developer.mozilla.org/ko/docs/Web/CSS/var https://nomadcoders.co/kokoa-clone/lectures/1741