웹 기록용

목표picogram 모작하기 ✅5월 1일 목표:탑바 그림판으로 레이아웃 잡기  큰 틀 잡기 (연습기록)top-section(red) -> top-bar(orange) -> logo1(green)+nav(green)+top-icon-box(green)✅5월 2일 목표: 탑바 코드팬으로 구현하기 (아직 진행중...) ->코드팬이동하기

[1교시 flex의 개념] ✅높이 모든 태그는 높이가 auto(기본값)일 때 0으로 작동한다 flex-item이 되면 높이가 auto(기본값)일 때 상위 엘리먼트의 100%으로 작동한다 예제로 확인하기 1번부터 5번 네모박스 중 하나만 값이 설정되어 있어도 다른 네모박스도 동일한 값을 상속받게 됨 (flex의 상속을 하고, 상속을 받는 특성) [2교시 flex-container / flex-item] ✅ flex- container item을 정렬하는 코드는 전부 flex-container에 작성된다 * justify-content : 가로정렬 *align-items : 세로정렬 *flex-direction : 방향정렬 *flex-wrap : 줄바꿈 정렬(반응형) *align-cotent : 줄바꿈이 되..

[7일차 1교시] 마켓컬리 상단바 구현 -추후 수정과 보기에 편하게 폴더를 묶어서 작업 -작업할 때에는 파일명을 알아보기 쉽게 구분해야 함(한글파일x) -바깥 박스는 고정된 채가 아니여야 함 가장 커야하는 박스.. -클래스선택자 이름이 헷갈리지 않게 주의할 것. [7일차 2교시] -마켓컬리 top-popup-section top-popup-section . container 구현 (정렬 및 컬러..) [7일차 3교시] -폰트정렬 -폰트 html은 상단 가장 윗쪽에.. 구글심볼 - weight 200 폰트랑 심볼을 같이 사용할때엔 폰트 밑에 배열 (폰트링크 ->심볼링크) [8일차 1교시 & 2교시] 7일차 복습 [8일차 3교시] 여백값 줄이는 방법 box-sizing 하는 이유 ✅마켓컬리 피그마 예제 만드..

[웹1 6일차] -💬1교시 앵커태그 복습 1. a + tap ->시작(옐로우) 2." " 안에 원하는 사이트 링크 주소 입력(그린) 3.그후 "" 밖에 띄어쓰기 target=" blank "(레드) 4.띄어쓰기 title작성+링크(블루) 5. 말풍선 텍스트(퍼플) *taget이 셀프일경우는 사이트내에서 주소이동 *blank인 경우에는 다른 사이트창이 열리면서 주소이동. 💬 2교시 -구글폰트 학습 [구글폰트 화면 설정] tip) 사이드바가 없는 경우 는 왼쪽상단의 filters 버튼 누르면 보임. ⭐폰트 사용 순서 원하는 폰트 클릭 -> get font 클릭 -> get embed code 또는 download all클릭 (원하는 상황에 따라) -> html에서 폰트를 사용하려면 get embed code..

[5일차 1교시] 클래스선택자 복습 + [5일차 2교시] inline-block 여백제거 복습+ 줄 바꿈 바꾸기 css 힘 [5일차 3교시] 앵커태그(하이퍼링크) [브라우저에서 텍스트 취급받는 요소] 텍스트 inline inline-block [텍스트 특징] 행간과 자간이 있다 *행간 : 줄과 줄 사이의 여백 *자간 : 글자와 글자 사이의 여백 기본적으로 폰트는 가독성 때문에 자간과 행간이 존재한다 inline과 inline-block도 브라우저에서 텍스트 취급을 받기 때문에 텍스트의 특징(행간,자간)을 갖고 있다고 보면 이해하기 좋다 텍스트의 속성을 없애기 위해서는??? Tip.텍스트의 속성은 한단계씩 떨어져 적용된다는 점을 생각해야 함 ->참고하기 [css의 힘] 아래로 갈수록 힘이 강해진다 but ..

[상위엘리먼트와 하위엘리먼트를 부르는 명칭] body-section 관계 body를 기준으로 section을 자식엘리먼트라고 부른다. section을 기준으로 body를 부모엘리먼트라고 부른다. div-body 관계 div를 기준으로 body를 조상엘리먼트라고 부른다. body를 기준으로 div를 후손엘리먼트라고 부른다. ->상속되는 텍스트 속성 예시. css에서 section에 적용하면, div로 상속 -> span에 상속되어 하위요소 span태그의 텍스트에 적용된다 [선택자 정리] > : 자식선택자 띄어쓰기 : 후손선택자 + : 인접동생선택자 section->div->span ->텍스트 ~ n번까지 반복예시 ->클래스 선택자 컬러 변경예시 css에서 클래스 선택자 적용시킬 때에는 이름앞에 . : 자식..

[공통] 1.display의 속성을 가지고 있다 2.레이아웃을 구성한다. [block] 1. 상위엘리멘트 크기만큼 너비를 상속받는다 (화면크기 x) 2. 한 줄을 하나씩 차지함 3. 크기가 아무리 작아도 한줄에 하나씩 배치된다 4. inline이나 inline-block요소를 제외하곤 block태그이다 5. 레이아웃을 구분할 때 사용되는 요소이다(큰 박스) ex)서치박스,배너박스 6. width(너비)가 auto(기본값)일 때 100% 작동한다 주요태그 ex ) div ->상단 이미지들의 빨간색칸, 파란색칸 참고. [lnline] 1. 한 줄안에서 일부분의 영역만 상속받는다(영역을 나눌 수 있음) 2. 다른 엘리멘트와 같이 사용할 수 있음(한 줄에 각각 배치 사용가능) 3. 상위엘리먼트 공간이 부족하지 ..

[html, css, js 용도] html : html은 문서 뼈대를 담당한다 (공간만 제공함) 예 ) 이미지, 글자 css : html에서 생성된 공간, 이미지, 글자 등을 꾸며주는 역할을 한다 예 ) 글자 크기, 글자 색상, 박스 크기 등 js : 동적인 부분을 담당한다 예 ) 특정 레이아웃을 클릭했을 때 페이지가 넘어감, X버튼을 클릭하면 팝업이 닫힘.. [html & 태그] 주석 : 주석안에 있는 코드는 실행되지 않는다. 용도는 여러가지이다 -> 메모(협업), 코드 실행 x, 잠시 감춰놓을 때 사용함 ctrl + / 태그 : 브라우저가 html문서를 읽어들일 때 인식할 수 있도록 도와주는 용도정도로 이해하면 좋음 여는 태그 : 닫는 태크 : 엘리먼트 div + tap : insert : 글자가 사..