TechLabs

1. 캐스케이딩이란? - 의미 : 폭포, 위에서 아래로 흐르는 - 상속 속성이 여러 개인 경우, 우선 순위를 부여하는 것을 의미한다. - 예를 들면, font-familly가 있다. 폰트는 웹 환경에 따라 적용되지 않는 경우가 많기 때문에 2개 이상 지정하는 경우가 많다. 맨 마지막에는 sans-serif 등 안전 장치를 부여한다. 이런 경우에는 가장 앞에 있는 폰트가 우선 순위가 높은 폰트이고, 뒤로 갈수록 우선 순위가 낮아진다. 중요도 : 선언 위치에 따라 우선 순위가 결정된다. 구체성 (명시도) : 구체적인 특성일 수록, 명시도가 높아진다. 선언 순서 : 맨 마지막이 우선 순위를 갖는다. 2. 중요도 브라우저 스타일 시트 : 기본값 사용자 스타일 시트 개발자 스타일 시트 우선 순위는 개발자 > 사용..

1. 절대 단위 px : pixel, 화소를 의미한다. 화면을 구성하는 가장 기본 단위이다. 네모 한칸을 의미한다. pt : 1 / 72 인치이다. 웹에서는 거의 사용하지 않는다. 2. 상대 단위 % : 부모 요소에 비례하여 비율 적용한다. em : 현재 폰트 사이즈를 기준으로 한다. rem : 최상위 폰트 사이즈를 기준으로 한다. /* em 예시 */ /* 현재 폰트 사이즈가 20px인 경우 */ 1em = 1 X 20 = 20px 3em = 3 X 20 = 60px /* rem 예시 */ /* 최상위 폰트 사이즈가 20px인 경우 */ 1em = 1 X 20 = 20px 3em = 3 X 20 = 60px em과 rem의 차이를 잘 알아두기. 3. Viewport를 고려한 단위 - 화면에서 그려지는 ..

1. 웹폰트 폰트를 이용하는 방법은 2가지가 있다. 폰트를 직접 다운로드 받아서 이용하기. 폰트를 다운로드하지 않고, 외부 특정 서버에 있는 폰트를 가져와서 보여주기. 1번 같은 경우는 @font-face를 이용하여 불러 오는데, 사용하기 복잡하여 2번이 사용하기 좋다. 2번은 링크를 따와서 보여주면 된다. 구글에서 구글 폰트를 쳐서 접속하면 된다. 빨간색에 있는 @import를 css 파일에 넣어준다. 글자를 적용하고 싶은 부분에 font-family를 넣어준다. 주의할 점은 꼭 가이드 페이지를 참고해야 한다. 노란색 박스처럼 font-weight가 여러 개 적용할 수 있는 글자가 있는 반면에, 한 가지 굵기만 적용 가능한 글자도 많기 때문이다. 2. 폰트 속성 font-size 폰트 사이즈를 지정한다..

1. Flex item이 여러 줄인 경우에는 어떻게 적용? 앞에서 봤던 grid처럼 flex도 여러 줄 css 적용이 가능하다. 그런데 어떻게 적용해야 할까? 강제 개행을 시켜줘야 한다. align-items 대신에 align-content 이용하기. (참고) flex-flow를 이용하여 단축 속성을 이용할 수 있다. 위의 3가지를 잘 이용하면 grid처럼 여러 줄 flex 적용이 가능하다. 2. flex-wrap으로 강제 줄 바꿈 적용하기 - flex-wrap 은 가로의 길이에 따라 강제 줄 바꿈을 적용할 것인지 아닌지 결정하는 속성이다. 위의 그림은 flex-wrap이 nowrap인 경우다. 분명 각각의 박스의 가로 너비를 300px로 지정하였으나, 무시하고 한 줄에 적어버리는 것을 볼 수 있다. 그..

1. 가상 클래스 선택자 2. 가상 요소 선택자 3. 형제 요소 선택자 1. 가상 클래스 선택자 - html 요소를 수정하지 않고, css에 가상 요소를 추가하는 선택자를 의미한다. first-child last-child nth-child 같은 부모 안에 있는 가상 클래스 선택자가 적용된 선택자에 해당하는 요소에서 위치 찾아서 css 적용한다. 만약, 그 위치에 해당 선택자가 없는 경우 css가 적용되지 않는다. first-of-type last-of-type nth-of-type 같은 부모 안에 있는 모든 선택자에 해당하는 요소에서 위치 찾 아서 css 적용한다. 후자가 사용하는 범위가 더욱 넓어서 자주 사용하는 편이다. 뒤에 위치를 나타내야 하는 경우, 숫자나 연산자 모두 가능하다. 내가 원하는 위..

1. Grid이란? - 레이아웃을 화면에 표시하는 방법 중 하나이다. flex와 많이 사용되기 때문에, 적절하게 상황에 맞게 사용하면 된다. 2. 바둑판 레이아웃 만들기 grid를 이용하여 바둑판 레이아웃을 설정할 수 있다. 이 때 grid-template-columns를 이용하면 된다. 정렬 방향을 열의 방향으로 설정하는 속성이다. auto auto auto 라고 설정하면 가로의 사이즈에 꽉 채워서 3개의 박스가 만들어지게 된다. 따라서 3 X 3 형태의 바둑판을 만들 수 있다. 3. 홈페이지 레이아웃 만들기 grid를 이용하여 홈페이지 레이아웃을 만들 수 있다. grid-template-areas와 grid-area를 이용하여 원하는 대로 배치가 가능하다. 주의할 점은 먼저 grid-area에 어떤 ..

1. Flex이란? - 중심축을 기준으로 화면 위에서 정렬하는 것을 의미한다. - 정렬 중에서 space 관련 정렬이 있는데 미묘하지만 차이를 잘 알아두기.

레이아웃을 float를 이용하여 만든 양식 1. Layout이란? - 화면 위에서 구성 또는 배열하는 작업이다. - 반응형 웹에 적절하지 않아서 현재 잘 이용하지 않는 방식이다. 가끔 디자인을 강조할 때 사용한다. - float, flex, grid 순으로 발전해왔다. flex와 grid는 상황에 따라 혼용한다. 2. float 개념 float를 설정하면 바로 뒤에 있는 태그가 따라 들어온다. 헤더 안에 메뉴를 만들 때, display와 text-align을 적절하게 이용하면 가운데 정렬을 할 수 있다. 3. clearfix - float를 적용한 뒤에 바로 밑에 있는 태그가 딸려 올라온다. 이를 방지하기 위하여 clear 속성을 이용하는데, 더 편리하게 이용하게 하기 위하여 클래스 이름을 clearfi..

1. box-sizing - box-sizing : content-box - box-sizing : border-box content-box 내용을 기준으로 css 적용한다. border-box 박스의 테두리를 기준으로 css 적용한다. content-box로 css 지정하면 오류가 날 수 있기 때문에, 반드시 border-box로 변경한 뒤에 css 적용하기.

1. css란 무엇일까? 2. css 선택자 3. font 관련 css 4. in-line vs block 1. css란 무엇일까? - css는 cascading style sheet를 의미한다. 선택자 {속성 : 값} 인라인 방식 이용 html 태그 안에 style="속성 : 값" 유지 보수하기 어렵고, 가독성이 떨어진다. 태그 이용 css 많을 수록, 유지 보수하기 어렵다. 분리된 css 파일 연결 가장 많이 이용하는 방식이다. 유지 보수와 가독성에 유리하다. link 태그를 이용하여 분리된 css 파일을 연결시켜 준다. - rel : 파일과 어떤 관계인지 지정한다. stylesheet 라고 적어주기. - href : 파일 경로를 지정한다. 2. css 선택자 태그 선택자 태그로 선택하기. id 선택..