$$config title: New Title keywords: - IT - ... $$ # 2021.11.12 정리 ### 기본 - height는 기본값이 auto 로 지정되어 있다. - div, section, nav 기본 값은 block이다. - 모든 엘리먼트는 디스플레이 속성을 가지고 있다. *** ### block과 inline-block의 차이점 ( 짱중요함 ) #### * block - block 요소일 때 , 너비가 지정되어 있지 않으면 최대한 늘어난다. - block 요소일 때, 높이가 지정되어 있지 않으면 최소한으로 줄어든다. - block 배열 방향 : 세로, 한 줄에 무조건 1개씩 #### * inline-block - inline-block 요소일 때, 너비가 지정되어 있지 않으면 최소한으로 줄어든다. - inline-block 요소일 때, 높이가 지정되어 있지 않으면 최소한으로 줄어든다. - inline-block 배열 방향 : 가로, 한 줄에 최대한 많이 *** ### 글자 색 관련 용어 - color : rgba - red/ green/ blue / alpha - 수치값은 0~255까지 ( alpha 는 0~1까지 ) - google _ color picker 참고 - 컬러코드로 사용 가능 ( ex. color : #ff00000f - 2개씩 r g b a 를 나타냄 ) - letter-spacing : 글자 간격 ( 단위 : px ) - font-weight : 글자 굵기 - 기본 : normal로 지정 / bold : 두껍게 - 줄 바꿈 : br ( * br은 하나짜리, 태그를 닫을 필요가 없다) - 링크 연동 : a ( " " 사이에 주소 입력 ) ( < a href = "{ 링크 }" [target="_blank"} > { 문구 } < /a >) - a : 디스플레이 기본 속성이 inline이다. (인라인 속성 디스플레이) = 한줄에 같이 나오는 속성이다 - - target="_blank" *** ##### 나중에 - table > tbody > tr* 10 > td * 10 {no. $} - table > thead > tr ^ tbody - table > ( thead > tr ) + tbody - < a href="#"> 문구 < /a> - 한번에 작성 요령 *** ### 시간표 #### * HTML - table - 입력 table border = "10" -기본 시작 형식 예시 -border 값은 테두리 굵기 - 줄 : tr 입력 - 부가정보 : th - 과목 : 메인 정보 / 교시, 요일 : 부가 정보 ( th ) - 사용 코드 : tr, th, td - * table의 자식으로 바로 tr이 올 수 없다 - 입력 순서 - thead - tr ( th : 교시 요일 - th : 월화수) - tbody - tr ( th : 교시 - th : 과목) - 나를 감싸는 엘리먼트 -부모 - 감싸진 엘리먼트 -자식 (감싸진 엘리먼트 끼리는 형제) - 예시 - section - div - nav - nav - nav - section과 div의 관계 - 형제 - div와 nav는 부모자식 *** ### 사이트 참고 - gdweb.co.kr - 위캔 내부 '지난 학생 작업물리스트' -브랜드 사이트 ( 전 기수 분들) 참고하기 - 송인선님, 한아름님 - 컴퓨터 화면 녹화 시 - oCam 활용 ### 조별과제 #### 예시 - 1조 : 4명 - 주제 선정 : 웹과 인터넷 - CSS display 문법 설명 - 만든 과제물은 유튜브 계정에 업로드 - LOG 채널 - 120개 - 기술 채널 - ex) 피그마, 컴포넌트 사용하는 방법 #### 역할분담 - 영상편집 ( 자막- vrew사용) - 영상표지제작 ( 썸네일) - 자료조사 - 피피티 제작 - 발표 ##### 주제 선정 - 1조( 조원 4명) - 11/19까지 제출 - 5-10분 - obs 스튜디오 , oCam으로 촬영 가능 웹퍼블리셔의 역할/ 트렌드 #### 웹 퍼블리셔란? - - - 향후 추구(개발)될 것 같은 트렌드 (2022년)