호다닥

SCSS : CSS Processer (전처리기) CSS Processor 에는 scss 외에도 stylus, less 도 있다. scss가 sass 를 위한 공식적인 syntax로 릴리즈 되면서 scss와 sass 가 점점 업계 표준으로 되어가고 있다. scss는 css를 programming language 처럼 syntax를 개선하는데, 이를 사용하면 css 없는 많은 유용한 기능을 사용할 수 있다. 단, 이것을 위해 compile과 build 하는 과정이 필요하다. gulp 는 compile 하거나 transform 해주는 nodeJS package gulpfile.babel.js 에서 routes 상수를 확인하면 해당 gulpfile 이 styles.scss 라는 특정 파일을 보고 있음을 알 수..

Flex flex 는 기기의 속성에 따라 디자인이 유동적으로 바뀌지 않는 CSS의 단점을 개선하기 위해 사용된다. 요소의 사이즈가 불명확하거나 동적으로 변화할때 유용하게 사용할 수 있다. 단, 부모가 flex-container 이어야만 자식 element 를 움직일 수 있다. FlexBox layout 에서 content, items, self 의 차이 Grid 주요 properties grid-auto-rows ( / [column]) grid-auto-flow : row(default) ( / [column]) - 내가 지정한 grid보다 더 많은 cell 들이 생성될 때, 추가 생성되는 cell 들을 어디로 생성할지 결정 minmax - element 크기 변화에 limit 을 준다. ( 최대값을 ..

HTML WEB은 Internet 상에서 구현되는 일종의 서비스로 WEB 외에도 FTP, email 등의 다양한 서비스들이 존재한다. 서로 다른 두 컴퓨터가 있다. 한 컴퓨터에는 Web Browser가 설치되어 있고, 다른 한 컴퓨터에는 Web Server 가 설치되어있다. WebServer가 설치된 컴퓨터는 info.cern.ch라는 주소를 가지고 있고, 이 컴퓨터에는 하드디스크도 있다. 하드디스크의 어느 디렉토리 안에 index.html이라는 파일이 저장되어 있다. Web Browser 가 설치된 컴퓨터에서 info.cern.ch/index.html 라는 주소를 호출하면 Internet을 통해 전기적 신호를 info/cern.ch 에 해당되는 컴퓨터에 보낸다. 그러면 Web Server라는 프로그램이..

인라인 요소를(블록 요소로 바꾸지 않고) 가로 가운데 정렬 시키기 위해서는 부모 요소에게 text-align: center vertical-align 속성은 인라인 또는 인라인 블록 요소에 적용된다. 부모요소에 inline-block 속성에 세로 길이가 100%인 요소를 만들고 해당 요소를 vertical-align: middle을 하면 더 완전하게 세로 정렬을 가운데로 할 수 있다. 주의사항 어떤 요소에 height: 100%;를 설정하기 위해서는 부모의 height가 설정되어 있어야 합니다. 위 경우에는 .helper의 부모인 .container에 height가 설정되어 있었기 때문에 가능했던 것이다. .info를 인라인 블록으로 설정해주면, line-height 속성을 활용해볼 수도 있습니다. 부모..

1. 기본적인 Font종류 Font는 크게 5종류로 나뉘며, 빨간색 글씨는 font의 종류 아래의 글씨들을 해당 font 종류에 해당하는 대표 font의 이름이다. 2. Font 설정 font 설정은 위 예시처럼 하면 된다. font-family: 키워드 뒤에 사용하고자 하는 font의 이름을 넣고, 해당 font가 정상적으로 적용되지 않을 때 적용할 2번째 font를 적고, 2번째 폰트마저 적용이 되지 않으면 사용할 font의 종류를 적어주면 된다. font를 한가지만 적거나 font 종류만 적어도 해당 폰트가 정상적으로 적용가능한 환경이라면 폰트가 적용된다. 3. Font 파일 사용하기 fonts 폴더에 원하는 font파일을 다운로드 받은 후에 css 파일에서 @font-face 를 사용하여 다운로드..

Parcel Install Parcel advanced 한 CSS 코드들을 old CSS 로 complie하기 위한 module Ctrl+` 단축키를 이용하여 console 창을 띄운 후에 npm init -y 명령어를 입력하면 package.json 파일이 생성된다. 그럼 다시 console 창에 clear 명령어를 입력한다. package.json 파일의 scripts 코드를 지우고 parcel를 설치하기 위해 npm install -g parcel -bundler 명령어를 입력한다. parcel 설치가 완료되면 html 파일을 생성하고, 해당 html 파일에 css 파일을 연결시킨 후에, package.json 파일에서 "main" ~ 코드부분을 제거하고, 아래 빨간 박스 내부의 코드를 입력한다. ..

position position: static; 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. position: relative; 태그의 위치를 변경하고 싶을 때 사용하며 top, right, bottom, left 속성을 사용해 위치 조절이 가능하다. 각각의 태그가 기존 static 였을 때 위치를 기준으로 해당 속성 방향으로 주어진 픽셀만큼 이동한다. position: absolute; relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absoulte는 postition: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중 position이 relative, absolute, fixed 인 태그가 없다면 가장 위의 태그(body)가 기준이 된..

배경 ( back-ground ) back-ground-image: url(' '); back-ground-repeat: (no-repeat / repeat / repeat-x / repeat-y ); background-attachment: (scroll / fixed); background-size: (cover / contain); background-position: ( bottom/center/left/right/top | bottom/center/left/right/top ); 필터 ( filter ) 어떤 이미지, 텍스트 등 그래픽 대상에게 다양한 효과를 줄 수 있는 기능이다. 컬러 이미지를 흑백이미지로 바꾼다던지, 뿌옇게 처리한다던지 등등 포토샵이나 기타 그래픽 프로그램들이 코드화 되었다고..

flex - 기본 / grow & shrink 플럭스를 사용하기 위해서는 2단계의 태그가 필요하다. li태그가 반드시 ul이나 ol같은 태그를 필요로 하듯이 정렬하고자 하는 item들은 그 부모에 해당하는 container가 필요하다. container의 역할을 하는 태그와 item 역할을 하는 태그들이 필요하다. Container 에 부여해야하는 속성 display flex-direction flex-wrap flex-flow justufy-content align-items align-content Item 에 부여해야하는 속성 order flex-grow flex-shrink flex-basis flex align-self 예시 .item:nth-child(2) 는 class명이 item인 elem..

가상 클래스 선택자 pseudo class selector class 선택자는 id 선택자도 아니고 tag 선택자도 아니다. class 선택자처럼 동작하지만 class 선택자는 아니고 여러가지 특수한 선택들을 하는 선택자로 각각의 엘리먼트들의 상태에 따라서 엘리먼트를 선택하는 선택자라고 할 수 있다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭 했을 때 :focus - tap키를 통해 focus를 이동했을 때 Cascading : 적용 우선순위 웹브라우저 < 사용자 < 저자 1. style attribute 2. id selector 3. class selector 4. tag selector *..