전체 글 80

[1222 테킷] 과제 리뷰

픽셀 퍼펙션 지켜주며 제작하기 타이틀, 메인, 태그 모두 일관되게 늘어나게끔 신경쓸 것 이렇게 img태그를 작명하는 것보다 등을 사용하는 걸 권장. 이미지가 여러장이 되었을 때. 같은 경우도 독립된 컴포넌트로 사용할 수 있기 때문에 그냥"hashtag"도 괜찮다. 이번에 작업하면서도 느낀 거지만, space-between은 유지보수 측면에서 예쁘지 않다. 코드리뷰는 이상적인 형태로 보내는 것보다는 치명적인 오류를 잡아주는 쪽. 같은 경우는 하이픈을 사용하는 이유가 명확해야 한다. 무엇을 지향하는 것인지? 팀내에서 약속을 잡을 때, 줄일것인지 말 것인지에 대해서도 이야기 한다. html 내부에서 - 볼드 처리하는 것은 권장하지 않는다. 왜냐하면 b는 단순히 두껍게하는 역할만 한다. 그렇기에 을 권장한다. ..

Project Log 2023.12.22

[1220 테킷] vw, 콘테이닝 블록, z-index

vw의 등장 CSS에는 절대 길이 단위, 상대 길이 단위가 있다. vw는 상대 길이에 해당. 상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 or viewport 크기)와 관련이 있다. vw(viewport-width): 뷰포트의 초기 컨테이닝 블록 너비 1%와 같다. height, font-size, box-shadow등 다양한 프로퍼티에서 사용가능하다. height에서 vw를 사용하면 반응형웹에 유용하게 사용할 수 있는 단위이다. 다양한 화면 크기에서 일관된 디자인을 유지할 수 있다. 보시다시피 글자 header의 width값을 기준으로 계산하여 반영한다. padding-top: %는 컨테이닝 블록 너비 기준 (vw 대체할 수 있다.) 콘테이닝 블록(containing block) element..

Project Log 2023.12.20

[1219 테킷] Box sizing, Position, Inset

개발 블로그를 지금까지 정리 안하고 올렸는데, 보미님처럼 내 언어로 풀어서 설명하면, 공부에 큰 도움이 될 것 같다는 생각이 들었다. 그래서 오늘은 블로그를 제대로 시작하기로 했다. 크게는 아니고, 하루에 3개의 개념이라도 제대로 정의내리는 것에 의의를 두겠다. 1. box-sizing 박스사이징이란 엘리먼트의 사이즈(넓이와 높이값)를 어떻게 계산하는지 결정하는 방식이다. 패딩과 마진을 적용할 때 박스 사이징을 사용하면 엘리먼트의 크기를 예측하기 쉬워진다. 엘리먼트에 width 값을 정해주면 보더 안쪽에 사이즈가 적용된다. border에 10px을 준 엘리먼트와 30px을 준 엘리먼트의 사이즈가 달라진다. initial: content-box border-box를 넣어주니까 border의 두께가 다름에도..

Project Log 2023.12.20

[1218 테킷] 미디어 쿼리, 마진

.l_wrapper {} 큰 레이아웃을 잡아주는 경우도 있음 근데 이 레이아웃 클래스는 이것만 사용하기. .l_wrapper .wow 두개를 넣진 않기!! 한 개만 궁금한 것 1. img h1이랑 공백 줄이려고 사이즈 조절했는데 vertical-align의 top는 무엇인지? 오늘 새로 배운 것 @media (max-width: 960px); (맛보기니까 스트레스 받지 말고 공부하기) 미디어 쿼리 : 반응형 웹을 위한 것 margin이란? 콘텐츠의 바깥쪽 여백 마진은 보여지는 디자인과 차지하고 있는 공간을 따로따로 관리할 수 있게 나눠진 프로퍼티이다. 마진은 차지하고 있는 공간이다. 마진은 액자같은 개념 고로 콘텐츠의 시작과 끝점을 자유자재로 바꿀 수 있다. negative margin margin-bo..

Project Log 2023.12.19

[1205 테킷] 웹 접근성

접근성이란? Accessbility Universal Design - 누구나 이용할 수 있는 디자인 Inclusive Design, Design for all 다양한 사용자를 포괄할 수 있는 것. 웹접근성 장애인, 고령자들이 이용하기 좋은 웹사이트 제작. 넷플릭스의 자막같은. 서비스를 제공하는 사람으로서 꼭 전하고 싶었던 운영철학 WCAG : Web Content Accessibility Guidelines Wai-Aria: 웹페이지의 접근성을 향상시키는 방법 규칙 1. 이렇듯, role를 넣어준다. 색상조합 다 크고 넓은 것보다 안정적으로 조합하는 것. 보다 쉐입의 느낌이 들게끔 크게 나타낼 것과 작게 나타낼 것을 구분하는 것. 그렇다면 훨씬 더 가독성이 생길 수 있다. 메인(primary color)..

Project Log 2023.12.15

[1214 테킷] CSS :: Flex 정복하기

블로그 리뷰 덩어리 전체 몇개인지? 한 개. margin: auto auto; 가 안되는 이유? 박스엘리먼츠의 생태계에는 위아래 여백이 없어요 문제당착 1. 가운데 정렬이 안됨. body에 height 값을 준다. viewport 등장! viewport란? 브라우저에서 보이는 창을 의미. viewport units: vw, vh, vmin, vmax height: 100%는 부모 요소의 100%이기 때문에 그냥 넣으면 안된다. height: 100vh; (높이를 바디에 100vh로 넣어주는 것.) - 근데 페이지가 오직 한 개만 있는 것이 아니기 때문에 확장성을 고려해서 마크업을 설정해야하 한다. 문제당착 2. 잔디밭은 마크업으로 굳이 넣을 필요가 없다. 왜냐하면 시멘틱한 부분이 없기 때문이다. 문제당착..

Project Log 2023.12.14

[1213 테킷]

아침 자바스크립트: // 싱글라인 ignored /* */ 다중라인 ignored 본 수업 블로그 리뷰 cascading 한 요소에 중복된 스타일을 주게 되었을때, 순차적으로 이해하는 것. reset.css에 있었던 img {vertical-align:top;} top을 기준으로 정렬되는 것이 스타일을 잡기 훨씬 수월하다. 시각적 보정의 예 원이 살짝 더 앞으로 빠져있다 -> 시각적 보정을 위해 해 놓은 것. 2. flex-basis | flex-grow | flex-shrink flex-item에 사용하는 프로퍼티 flex-basis는 아이템의 기본 크기를 설정한다. flex-grow 가용범위는 그냥 숫자만 쓴다. Verticle-align 인라인과 인라인 요소 사이의 세로 정렬 사실,flex box는..

Project Log 2023.12.14

[테킷1212] CSS

아침 자습 자바스크립트 call 본 수업 블로그 리뷰 는 단순 꾸며주기 마크업, 이 시멘틱하기 때문에 사용 권장. BEM 규칙: CSS의 클래스 네이밍 방법론 BFC - 블록 서식 맥락: 마진 병합 극복 (최소한으로 알아두기) 마진 병합 현상으로 인한, H 극복 방법 결합자는 명시도 점수에 영향을 끼치지 않는다. .profile.profile(종찬아 종찬아 로 사용 가능 하다. - 클래스 선택할 때 더 강조하는 느낌) inline이 !important보다 셀렉트 specifity가 낮지만 다른 것보단 높다. 그래서 적용할 때 헷갈릴 수 있음. cascading :CSS는 어떤 기준으로 어떤 요소를 선택해서, 어떻게 적용하는 것일까? width: auto; / width:100%; 일반적으로 auto가 합..

카테고리 없음 2023.12.12

[테킷 1211] CSS

아침 자습 자바스크립트 __proto_ / object.~ 본 수업 과제 리뷰 절대경로와 상대경로 절대경로와 상대경로는 상황에 맞게 대처하는 것. 실제 프로젝트를 진행할 때 경로의 개념은 동일시 하는 것을 권장. 절대경로와 상대경로를 섞지 않게끔.(일관성 유지) list-style: none; background-image: url("./images/alien.png"); background-size: 20px; background-repeat: no-repeat; background-position: left; } 리스트 앞에 이미지는 list-style 보다 pseudo-element로 넣어주는 것을 권장. 브라우저에서 활용할 때의 자유도가 높기 때문. 절대경로: 경로를 절대적으로 지정해주는 것. ...

Project Log 2023.12.11

[테킷 1207] 특강, CSS

👩‍💻 아침 자습:: Javascript 객체 고급 11. 상속(extends) 중복되는 코드를 상속하여 모두 줄이는 것 12. super 부모가 가지고 있는 기능을 사용할 수 있는 것(super.sum) 👩‍🎤 수업 시작:: 특강, CSS 스프린트 회고 특강 양치질을 못한다고 혼나는 이유? 피드백을 1년에 1-2번 받기 때문에 교정할 기회가 1-2번 밖에 안된다. 나만의 색깔은 나에게 방향성을 위한 나침반이 되고, 다른 사람들에게는 영감을 준다. 훌륭한 엔지니어란? 1. 좋은 코드를 짠다.(의도를 드러내는 네이밍, 재사용성이 높은 코드, 성능을 고려한 설계, 버그 최소화, 의미있는 테스트 코드) 2. 작업의 현재 가치를 극대화한다.(적은 코드, 코드 없이 문제를 해결하고 기능을 동작하는 프로그램을 만드..

Project Log 2023.12.08