멋쟁이사자처럼 프론트엔드 스쿨 1기/TIL(프론트엔드 스쿨)

[멋쟁이사자처럼 프론트엔드 스쿨] 211109 TIL

오늘은 SVG를 조작하는 방법을 배웠다. SVG를 이미지가 아닌 인라인 방식으로 사용하면 CSS로 제어할 수 있다. CSS로 SVG 제어하기 html에 직접 svg태그를 쓰고 CSS로 제어할 수 있다. svg 태그를 직접 제어하거나, svg 태그 내에 있는 circle, rect, line, path 등의 자식 태그들을 각각 제어할 수도 있다. .path1 { stroke: blue; } .path2 { fill: red; } stroke으로 선을, fill로 도형의 내부를 색칠할 수 있다. 참고자료 https://ossam5.tistory.com/112 [HTML기초문법] 13강 SVG태그 및 이미지 활용 - OSSAM강좌 1. SVG 태그란? - SVG태그는 Scalable Vector Graphic..

[멋쟁이사자처럼 프론트엔드 스쿨] 211108 TIL

오늘은 flex, grid를 포함한 CSS의 중요한 부분들을 많이 배웠다. 주말에 스터디를 진행하면서 알게 된 점도 여기에 포함시키겠다. CSS Flex Flex는 블록 요소 내에서 공간 분할과 정렬을 용이하게 한다. 용어 정리 Flex Container : display: flex인 요소 Flex Item : Flex Container의 자식 요소 Main Axis : Flex Item이 배치된 방향의 축 Cross Axis : Main Axis와 수직인 축 1 2 3 4 5 .flexbox { display: flex; width: 500px; padding: 5px; border: 3px solid black; } .flexbox div { border: 3px solid black; } .item..

[멋쟁이사자처럼 프론트엔드 스쿨] 211105 TIL

일요일(11/07)이 되어서야 금요일 TIL을 쓰기 시작한다. 그날그날 배운 내용이 많다기 보다는, 배운 내용에 대해서 구글링을 항상 곁들이는데 이러다 보면 구글링 하면서 배운 것들이 계속 추가되서 끝이 없다. 내가 너무 과하게 하는 건 아닌가 싶다. 이제 스터디도 2개나 하게 되었는데, 다음주에도 TIL이 계속 밀릴까봐 걱정된다. 더군다나 오늘 배운 내용들은 단순한 기초 개념이 아니라, 지금까지 배운 내용들을 되짚어보면서 심화적인 내용이 많이 나왔었다. 더 부지런해져야겠다. inline-block 공백 문제 inline-block 요소를 사용하면 margin이 아닌 알 수 없는 여백이 생기는 문제가 있다. .box { display: inline-block; width: 100px; height: 10..

[멋쟁이사자처럼 프론트엔드 스쿨] 211104 TIL

오늘은 수업이 끝난 후에 지금까지 배운 HTML/CSS 지식만을 활용해서 자신만의 캐릭터를 그리는 과제가 있었다. 이를 위해 그림을 그리는데 필요한 부분들 위주로 진도를 나갔다. Margin Collapsing 브라우저의 렌더링 규칙에 의해 인접한 Block 요소들간에 margin-top 또는 margin-bottom이 상쇄되는 현상을 Margin Collapsing이라고 한다. 1. 인접 형제 요소 인접한 형제 요소끼리 margin-top과 margin-bottom이 맞닿아 있으면 둘 중 더 큰 값 하나만 적용되고 나머지 하나는 상쇄되어 적용되지 않고 렌더링된다. 2. 빈 요소 margin을 제외한 상하 크기를 결정하는 프로퍼티의 값을 명시하지 않았거나, 내부에 inline 콘텐츠가 없어서 높이가 0이..

[멋쟁이사자처럼 프론트엔드 스쿨] 211103 TIL

TIL 작성이 계속 밀리고 있다. 지금 이 글을 쓰기 시작한 시점도 이미 하루가 지난 4일이다. 디스코드 질문 채널에서 수준 높은 질의응답들이 오가는데, 놓치고 싶지 않은 것들이 많아서 이것저것 다 넣으려 하다보니 TIL 작성이 길어졌다. 지금 내 수준을 뛰어 넘는 내용은 나중에 제대로 이해를 한 후에 따로 게시물을 작성해야겠다. CSS 텍스트 줄바꿈 HTML 태그에서 개행을 하려면 태그를 사용하는데, 개행이 필요할 때마다 일일이 태그를 사용하지 않고 CSS를 통해 개행을 할 수 있다. white-space 공백 문자 처리 연속된 공백을 합치는가? 개행 문자에서 줄바꿈이 일어나는가? 콘텐츠 박스를 넘어가면 자동으로 줄바꿈이 일어나는가? noraml(기본값) ✅ ❌ ✅ nowrap ✅ ❌ ❌ pre ❌ ✅..

[멋쟁이사자처럼 프론트엔드 스쿨] 211102 TIL

오늘은 수업보다는 워크샵 위주여서 배운 내용 자체는 적었다. 하지만 120명이 넘게 모여 있는 디스코드 채널에서 질문과 답변이 끊이질 않는데 거기에서 얻어갈 부분들이 정말 많았다. 반응형 이미지 img 태그의 srcset, sizes 어트리뷰트를 활용하여 반응형 이미지를 구현할 수 있다. 각기 다른 해상도의 이미지를 준비하여 뷰포트에 따라 적합한 해상도의 이미지를 선택하여 표시할 수 있다. 브라우저가 이미지를 선택하는 과정은 다음과 같다. 뷰포트의 너비를 확인한다. sizes 목록에서 가장 먼저 참이 되는 미디어 쿼리의 슬롯 너비를 확인한다. 해당 슬롯 너비에 가장 적합한 srcset 이미지를 선택하여 불러온다. srcset을 지원하지 않는 브라우저라면 src 이미지를 불러온다. 예를 들어, 뷰포트가 4..

[멋쟁이사자처럼 프론트엔드 스쿨] 211101 TIL

오늘은 github과 VSC 기초와 HTML 주요 태그들에 대해서 간단하게 짚어보는 시간이었다. 내용 자체는 기초적이지만, 강사님께서 보안 관련 이슈 등 단순하게 시간표에 적혀 있는 내용을 훨씬 넘어서는 부분들도 다루어 주셨다. Emmet 문법 Emmet은 강력한 자동완성 기능을 통해 HTML, XML 등의 문서를 빠르게 편집할 수 있도록 도와주는 플러그인이다. VSC에는 Emmet이 기본으로 내장되어 있다. Emmet 문법을 쓸 때는 공백 없이 한 번에 이어서 작성하여야 하며, VSC에서 Emmet 작성 후 Tab 키 또는 Enter 키를 누르면 자동완성 기능이 실행된다. div.foo div#foo div[width="500px"] div>div div+div div*5 div{foo} foo div..

[멋쟁이사자처럼 프론트엔드 스쿨] 211029 TIL

오늘은 첫 날이라 오리엔테이션이 끝난 후 3시간 가량 온라인 강의를 듣는 것이 전부였다. 처음 코딩을 배우는 사람들을 겨냥한 강의여서 기초적인 내용이었지만, 진도는 꽤 빠른 편이었다. box-shadow 요소에 테두리를 감싼 그림자 효과를 추가한다. { box-shadow: offset-x offset-y blur-radius color; } offset-x, offset-y로 그림자의 위치를 설정한다. blur-radius로 그림자의 흐린 정도를 설정한다. 크기가 클 수록 크기가 커지고 색이 밝아진다. { box-shadow: 0 0 5px black; } { box-shadow: 0 0 25px black; } { box-shadow: 5px 5px 5px black; } 요소를 중앙 정렬 하는 방법..