TIL
-
[Day 19] 반응형웹 & SVGTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 21. 23:55
1. 반응형 웹 반응형웹을 만들기 위해선 기본적으로 mata viewport를 설정해야 한다. (vsc에서 자동적으로 완성되는 html 코드이지만 반응형웹을 위해 필수적이었다는 사실) 이후 미디어쿼리를 지정해야 하는데, 미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만들어주는 기능이다. 아래의 예시를 살펴보자 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur nemo nobis! Commodi doloribus iure fugiat odio corporis vel consequatur autem, hic accusantium optio, cum soluta vitae ..
-
[Day 18] 반응형 사이즈 조절 & 밴딩머신 코드리뷰TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 20. 22:07
1. 반응형 고려해서 이미지, 백그라운드, 비디오 사이즈 조절하기 1) 이미지와 비디오 img { max-width: 100% /*원본 이미지크기의 100%*/ width: 100% /*바디의 100%*/ 비디오도 요런 식으로 똑같이 적용되지만, 다만 height는 100%해도 100%로 안맞춰진다. **iframe(뿐만 아니라 모든 요소)는 padding-top, -bottom 속성(%일 경우)이 부모 요소 넓이에 비례한다! 2) 백그라운드 이미지 .요소 { width: 100vw; height: 100vh; background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxM..
-
[Day 17] 드롭박스 구현 코드리뷰 & CSS 실무 테크닉TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 20. 00:48
1. dropbox 구현 코드리뷰 후 알게된 점 원래는 셀렉트박스로 마크업을 해야하지만, 드롭박스 디자인을 바꿀 수 없기 때문에, 바꾸기 위해서 ul>li>button으로 마크업을 대체한다. 그러면 아래와 같이 전체 코드가 완성된다. 최애 프로그래밍언어를 선택해 주세요 최애 프로그래밍 언어 Python Java JavaScript C# C/C++ 여기서 버튼에 글자 수가 많아져도 ...처리를 할 수 있는 말줄임을 위해서 txt-ellipsis 클래스를 넣어서 다음과 같이 css 처리를 할 수 있다. 말줄임 처리에 대한 자세한내용 참고 https://deeplify.dev/front-end/markup/text-ellipsis [HTML/CSS] 말줄임 표시 하는 방법: 1줄, 2줄 예제 html과 CSS..
-
[Day 16] 로그인창 구현 코드 리뷰TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 18. 23:06
활기찬 월요일이 돌아왔다! (멋사로 월요병 극복,,?!) 오늘은 큩재현님과 오전에 CSS 설계기법을 배운 후 오후에는 위니브 로그인창 구현 과제에 대해서 코드리뷰하는 시간을 가졌다. 로그인창, 드롭박스, 밴딩머신 과제를 한꺼번에 하느라 정신없었던 지난주.. 주말에 가까스로 로그인창 구현을 어찌저찌 해냈는데 오늘 바로 코드리뷰 하는 시간을 가졌다. 다른 아기사자 분들이 한 코드를 봤는데, 자바스크립트 기능도 넣으신 분들이 많아서 정말 대단하다고 느꼈다..(멋지다 증맬,,,,저도 곧 따라갈게유.,,) 우리 아기사자(쌔)비지님들의 리뷰가 끝나고 재현님이 짠 (*정석*)코드를 봤는데 로그인 버튼이나 x 버튼 등 재활용이 가능한 부분에 대해서 모듈화를 따로 해놓으셨다! 재현님의 짠 코드를 보며 모듈화의 중요성을 ..
-
[Day 14]CSS Flex 2 (-basis, -grow, -shrink)TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 15. 23:22
1. flex-basis 말 그대로 basic하게 기본값을 정할 때 사용하며, 자식 요소에 사용한다. width와 height와 다른 점은 axis 방향에 따라 달라지며, 안에 컨텐츠에 따라 크기가 유연하게 바뀐다는 점이다. 기본 디폴트는 auto이다.(이 경우 width와 height 값을 사용) 만약 width, height 값이 적용되어 있어도 basis 속성이 사용된다면 무시된다. 2. flex-grow 자식요소에 사용 만약 flex-grow: 1이면 박스의 여백크기가 모든 자식들에게 균등하게 분배된다. 만약 자식 중 하나만 2의 값을 가지면, 다른 자식들보다 여백의 크기가 2배로 길다. 3. flex-shrink flex-shrink는 브라우저에게 요소가 최소로 줄어들 수 있는 사이즈를 알려준다..
-
[Day 14] CSS GridTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 15. 01:44
grid 부모요소 속성 display: grid(필수) grid-template-columns: grid-template-rows: 길이단위(%,px, em) 혹은 fr(비율) 가 오거나 repeat(개수, 길이단위(%,px, em) 혹은 fr)로 사용 가능하다. ex) 1fr 5fr : 6등분으로 나누고 각각 1/6, 5/6 위 두 속성을 단축=> grid-template 자식요소 속성 -grid-column-start/end -grid-row-start/end 위 속성 단축 => grid-column, grid-row 더 단축==> grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end (negative 속성도 가능- 이경우 ..
-
[Day 13] CSS Combinator & FlexTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 13. 18:48
Combinator CSS에서 선택자를 단독으로 사용하는 게 아니라 여러 개를 결합하는 쓰는 경우가 있는데, 이렇게 사용하는 선택자를 Combinator라고 한다. 컴비네이터의 종류로는 1. 자손(Descendant) 컴비네이터: 공백 2. 자식(Child) 컴비네이터: > 3. 인접 형제(Adjacent sibling) 컴비네이터: + 4. 일반 형제(General sibling) 컴비네이터: ~ 아래 예시를 통해 퀵하게 익혀보자! /*섹션 아래에 있는 모든 ul 태그*/ section ul { text-shadow: none; } /*섹션 바래 아래에 있는 ul 태그*/ section > ul { text-shadow: none; } /*h1 바로 옆에 있는는 ul 태그만*/ h1 + ul { col..
-
[Day 12] CSS floatTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 12. 21:36
오랜만에 !쿨재현!님과 함께하는 쉅시간~ 오늘은 css float 속성에 대해 집중적으로 다뤘다. Float '띄우다'라는 뜻을 가지고 있으며 다양한 객체를 띄워서 정렬을 하는 속성을 가져서 마치 inline-block과 같은 성질로 바뀐다. 노멀 플로우에서 벗어나 붕붕 뜨게 된다. 보통 블럭 요소를 왼쪽(float: left)이나 오른쪽(float: right)으로 정렬할 때 많이 쓰인다. 여기서 특이한 점은, 블록 요소는 가로폭 전체를 width로 가지는데, 만약 1번째 블록요소에 float를 적용시키면 이런 식으로 마치 inline-block을 적용시킨 것 마냥 2번째 요소가 1번째 요소의 옆에 붙게 된다! 보통 인라인 요소들과 블록요소들은 normal flow에 따라 레이아웃이 결정이 되는데, 요..