잼굴 코딩공장

최근 급하게 떡상하고있는 Tailwindcss. 사용량 2위에 부트스트랩에 비해 압도적인 만족도. 그 이유는 뭘까? 한번은 체험 해봐야겠다 싶었고, 수업에서 배우고 4시간정도 실습시간이 주어졌다. 실습시간동안 간단하게 Tailwind만 이용해서 이력서를 만들어 보았다. 체험후기: 클래스명이 직관적이라서 몇번 쓰다보면 적응돼서 저절로 외워진다. 사이트도 직관적이고 검색기능이 유용하다. Tailwind를 사용하기 위해서는 head에 CDN script를 적어둬야한다. 검색기능을 활용하면 원하는 기능을 쉽게 찾을수있다. 클래스에 원하는 색상의 클래스명을 입력하면 알아서 CSS가 적용되는 구조이다. Tailwind를 체험해보고자 이력서를 간단하게 만들어 보았다. https://jamgoori.github.io/..

sass와 scss의 차이 sass : 괄호 없이 사용가능함 .background color : red scss : 괄호 사용함 .background { color : red; } nesting 문법 관련있는 Class들 묶을 때 좋음 Nesting안에 또 Nesting 할수있지만 이렇게까지 거의 사용안함 UI들을 뭉탱이로 관리할 수 있음 .main { h4 { font-size: 16px; } button { color: red; } } 이건 SCSS로 작성한것 CSS 결과물: .main h4 { font-size: 16px; } .main-bg button { color: red; } @extend 이미 존재하는 속성들을 복붙하지 않고 사용할수 있다. 사용법 .**** { } : 변수선언 %**** ..

반응형 이미지 배경 꽉채우기 background: no-repeat; background-size: cover; background-position: center; max-width : 100% -> 이미지 크기의 최대크기까지 늘려줌 width: 100% -> 화면 최대크기까지 늘려줌 반응형 비디오 autoplay 할때는 muted 설정하자 -> 웹 접근성때문에! 영상도 width 100% -> 반응형 지원함 영상도 max-width: 100%는 원본의 영상크기까지 늘어남. 유튜브는 비디오랑 다르게 url에 autoplay, mute 같은거 붙어있음. (파라미터) -> 알아서 자동재생+음소거 유튜브영상 width:100%, height:100% 주면 되긴하는데 화면비율을 자동으로 잡아주진않음. -> 10..

Overflow 자식요소가 부모요소를 넘어갈때 처리하는 방법을 선택할수있다. Overflow: hidden 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리한다. 그래도 스크린 리더기에서 읽어줌 .over{ overflow: hidden; border: 5px solid orange; width: 200px; height: 200px; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ipsum ipsa ratione numquam iste? Provident maiores reiciendis sequi, dolorem impedit voluptatem laudantium officia ad corrupti po..

박스의 구성 HTML의 박스는 4가지 요소로 구성되어있다. 콘텐츠(content) : 콘텐츠가 표시되는 영역. width와 height로 크기를 설정할수있다. 패딩(padding) : 콘텐츠와 테두리 사이의 영역. padding으로 크기를 설정할수있다. 보더(border) : 콘텐츠와 패딩을 둘러싸는 영역. border로 크기, 모양, 색깔을 설정할수있다. 마진(margin) : 가장 바깥쪽 영역. margin으로 크기를 설정할수있다. 박스의 유형 1. 블록 박스 2. 인라인 박스 (hidden) 인라인 블록 안녕 안녕 div = 블록 span = 인라인 블록박스 남는 공간을 margin으로 다채움. width와 height로 크기를 설정할수있음 패딩과 보더 마진 모두사용가능 인라인 박스 컨텐츠 넓이만큼..

마진(margin)은 요소의 네방향 바깥 여백을 말한다. *(안쪽 여백은 패딩(padding) 마진 겹침현상 (Margin Collapsing) 블록요소에서 일어나는 현상. 인접한 블록의 상하단 마진이 겹쳐지는것으로 의도된 현상. 겹쳐지는것은 더 큰 마진값이 기준이다. 그림에서 겹침현상이 없었다면 Section#1과 Section#2의 사이가 40px이어야한다. 하지만, 겹침현상으로 20px로 나타나짐 😥 그런데 이게 부모-자식 요소간에도 적용이된다... 쩝 1. 마진 적용 X .first { background-color: red; width: 400px; margin: 0 auto; border: 1px solid black; } .second { background-color: orange; wid..

1. CSS란 무엇인가? -> Cascading Style Sheets의 약자 // HTML로 된거 꾸며주는거 2. CSS 우선적용 순위 쉽게 생각하면 태그내에서 가장 가까운걸로 적용됨 3. CSS는 2버전 이후로 모듈로 업데이트중 4. CSS의 기본구조 4.1 Selector 4.2 Property 4.3 Value 선택자(Selector): 스타일을 적용하고자 하는 HTML 요소를 선택 속성(Property): 스타일 속성 이름 값(Value): 속성에 대응되는 값 Declaration 선언 블록은 각각 적혀있는 선택자에게만 적용 됨 선언 블록 내부의 한줄한줄 = 선언 선언 끝날때마다 ; (세미콜론) 써야함 CSS 적용하기 CSS를 적용하는 방식에는 4가지가 있다. 순서대로 CSS 우선 적용순위가 위..

블록은 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소 인라인은 컨텐츠 자신의 크기 만큼 영역을 가지는 요소 안녕 안녕 인라인은 height같은거 조정안되는데 dispaly:inlie block; 주면 조정가능 Block 요소들 연락처 정보 단락 콘텐츠 부가 콘텐츠 긴("블록") 인용구 상세 정보 위젯 대화상자 설명 목록의 정의 설명 문서의 분할 설명 목록 설명 목록의 정의 필드 집합의 라벨 그림 설명 미디어 콘텐츠 그룹과 설명 (을 참고하세요) 페이지나 구역의 푸터 입력 폼 , , , , , 1~6단계 제목 페이지나 구역의 헤더 헤더 정보 그룹 수평선(구분선) 목록의 항목 문서에서 하나 뿐인 중심 콘텐츠 탐색 링크를 포함 정렬된 목록 p>문단 미리 서식 적용한 글 웹 페이지의 구역 표 정..

테이블(표형식)을 만들기 위해서는 을 사용한다. 의 자식요소 caption (제목) tr (행) col (열) th (셀의 제목) td (셀) 자식요소에 대해 알아보자 1. 테이블의 제목이나 설명을 의미함! 시각장애인들을 위해 사용할수있으면 사용해주자. 이달의 책 판매량 구분 이름 판매량 2. , , 각각 테이블의 머리글, 본문, 바닥글을 의미함. 꼭 써야하는건 아님. 테이블 내용이 많을때 구역을 보기쉽게 나누기위해 사용하자. tfoot에는 주로 결론, 합계 이런거 넣음 3. , , 은 테이블 행을 나눌때 사용한다. 는 태그로 나눈 행에서 셀을 분리할때 사용한다. 는 행,열의 머리말로 나타날때 씀. 굵게, 가운데정렬로 표현됨 이달의 책 판매량 구분 이름 판매량 1 해리포터 100 4. colspan을 하..

Form은 정보를 입력하는 양식. Form에 입력하고 제출하게 되면 데이터는 서버로 전송되고, 전송된 데이터는 웹서버가 처리하고, 처리 후 로그인 결과와 같은 다른 웹페이지를 클라이언트에 전송한다. Form 동작방식 웹 페이지에 있는 form에 데이터를 입력 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동한다. 웹 서버는 데이터를 처리하기 위해 APP을 호출한다. 이때 APP은 물리적으로 별도의 서버일 수도 있다. 필요에 따라 APP은 DB로 데이터를 전송한다. 이때 DB는 물리적으로 별도의 서버일 수도 있다. DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송한다. 웹 서버는 받은 결과를 Client 브라우저에게 보낸다. 사용자 브라우저는 Response 받은 페이지..