HTML & CSS & Javascript/데이터 분석을 위한 웹 개발 언어

데이터 분석을 위한 웹 개발 언어 ✔️ 미디어 쿼리✔️ js_인터렉티브 웹 요소 생성✔️ js_윈도우 객체와 스크롤     ✔️ 미디어 쿼리    기본 스타일 설정미디어 쿼리(@media) : CSS에서 화면 크기나 장치 측성에 따라 스타일을 조정예) 컴퓨터 화면에서는 큰 폰트 활용, 모바일 기기에서는 상대적으로 작은 폰트 활용'F12 -> 장치 확인 버튼으로 너비와 높이 바꿔가면서 확인 가능html {font-size: 80px;}article {width: 40%; height: 20%; background-color: pink; margin: 100px auto;} 미디어 쿼리 화면 크기에 따라서 바뀌는 폰트 사이즈(전체 폰트 크기는 80px이며 화면 너비가 901px 이상인 경우 전체의..

데이터 분석을 위한 웹 개발 언어 ✔️ 레이아웃_flexbox✔️ 레이아웃_grid     ✔️ 레이아웃_flexbox    기본 설정flexbox : 1차원 방식(가로, 세로)으로 레이아웃을 설계하는 방식블록 요소를 자유롭게 정렬하기 위해서 만들어짐.flex-container { width: 300px; height: 200px; border: 1px solid black; display: flex;} .flex-item { color: white; background-color: brown; border: 1px solid white;}.flex-item:nth-child(2n) {background-color: blue;} 1 2 3 4 (flex-container는 너비는 3..

데이터 분석을 위한 웹 개발 언어 ✔️ 콘텐츠 모양 변경✔️ 콘텐츠 모양 변경_2      ✔️ 콘텐츠 모양 변경    크기 조정scale : 크기 확대/축소1은 원래 크기 1보다 작으면 축소, 크면 확대section article { width: 100%; height: 100%; background: blue; opacity: 0.3;}section:nth-of-type(1) article {transform: scale(0.8);}콘텐츠 모양을 자유롭게 변경 (파란 박스가 원래 크기의 80%로 설정)    기울기 조정skewX : 가로(X축) 방향으로 기울임skewY : 세로(Y축) 방향으로 기울임section article { width: 10..

데이터 분석을 위한 웹 개발 언어 ✔️ 배경 설정✔️  배치와 위치 설정✔️  스타일 및 효과 설정     ✔️ 배경 설정    배경색 지정background-color :요소의 배경색 변경(블록 요소의 배경색을 변경 가능)설정 가능 값 단위색상명 : Red, Green, Blue, ...16진수 : #000000RGB : rgb(0, 0, 255)RGBA : rgba(0,0,255,1) (마지막 숫자는 투명도 지정).backgcolor div:nth-child(1) {background-color: black; color: white;}.backgcolor div:nth-child(2) {background-color: #aaaaaa; color: white;}.backgcolor div:nth-chi..

데이터 분석을 위한 웹 개발 언어 ✔️ 폰트 변환✔️ 텍스트 변환✔️ 레이아웃 설정     ✔️ 폰트 변환    폰트 굵기 변경font-weight: 굵기 설정normal : 일반적인 굵기bold : 두꺼운 굵기h1 {font-weight: normal;}p > span {font-weight: bold;} HELLO Lorem ipsum dolor sit amet.(HELLO는 일반적인 굵기로 나타나고, p문장 중 ipsum만 굵은 글씨로 표시)    폰트 크기 변경font-size : px, em, rem 단위로 설정px : 한 픽셀이 한 글자로 설정em : 부모요소를 기준으로 폰트 크기를 조정 (부모 20px 자식 2em(40px))rem : html(16px)을 지준으로 폰트 크기 조정 (2..

데이터 분석을 위한 웹 개발 언어 ✔️ 복합 셀렉터✔️가상 클래스 셀렉터     ✔️ 복합 셀렉터    후손 셀렉터셀렉터A 셀렉터B : 부모 자식 관계뿐 아니라 더 깊은 계층(후손 관계)까지 포함하는 셀렉터div p {color: red;} 후손요소 1 후손요소 2 후손요소 3 후손요소 4(자식관계인 후손요소 1,2와 자손 관계인 후손요소 3까지 글자 색이 빨간색으로 변환)    자식 셀렉터셀렉터A > 셀렉터B = 부모 > 자식div > p {color: black;}span > p {color: brown;} 후손요소 1 후손요소 2 후손요소 3 후손요소 4(div의 자식 p인 후손요소 1,2는 글자색이 검은색, span의 자식 p인 후손요소 3은 글자색이 갈색으로 변환)    형제(동위) 셀..

데이터 분석을 위한 웹 개발 언어 ✔️ CSS 셀렉터✔️ 속성(Attribute)  셀렉터     ✔️ CSS 셀렉터    CSS 셀렉터데이터 크롤링을 진행하기 위해서는 원하는 데이터를 웹에서 직접 수집CSS 셀렉터를 알면 HTML에서 원하는 부분을 정확히 찾는데 용이    태그 셀렉터태그 이름을 지정하여 같은 태그의 스타일 변경/* 태그 셀렉터 : 태그 이름을 지정하여 같은 태그의 스타일 변경*/h1{color: violet;}h2{color: black;}h3{color: aquamarine;}p{color: blue;}Hello World!Hello World2this paragraph is styled with CSSLorem ipsum dolor sit amet.  +  HTML 코드 안에 st..

데이터 분석을 위한 웹 개발 언어 ✔️ 목록 태그✔️ 폼 태그✔️ 오디오와 비디오 태그     ✔️ 목록 태그    순서가 없는 목록 : ul(unordered list)로 순서가 중요하지 않은 항목 나열 시 사용 : 순서 내용은 해당 태그로 감싸며, 기본적으로 앞에 점(•) 표시 붙음내가 좋아하는 과일 딸기 바나나 사과   +  2단 목록으로 확장 안에 또 다른 을 넣으면 계층적인 목록 생성 가능내가 좋아하는 음식 과일 딸기 바나나 사과 면류 음료수     순서가 있는 목록 : ol(ordered list)의 약자로, 순서가 중요한 항목을 나열할 때 사용 : 순서 내용은 해당 태그로 감싸며, 기본적으로 숫자(1, 2, 3…) 표시 붙음내가 좋아하는 음식 과일 면류 ..

데이터 분석을 위한 웹 개발 언어 ✔️ HTML 태그✔️ 서식태그     ✔️ HTML 태그  기본적인 HTML 구조 : HTML5 문서임을 선언: 페이지의 언어를 한국어로 설정(기본적으로 영어(en)로 설정됨): 메타데이터와 외부 파일 연결을 설정하는 공간: 실제로 브라우저에 보이는 콘텐츠를 담는 공간  HTML태그웹 브라우저가 웹 문서를 이해하고 표시 가능하도록 콘텐츠를 분류하는 규칙여는 태그()닫는 태그()   계층 구조 이해 부모 태그와 자식 태그, 조상 태그태그들 간의 계층 구조를 가짐부모 태그와 자식 태그, 그리고 더 상위인 조상 태그로 나눌 수 있음(표를 생성하는 경우 확연히 확인 가능)  : 표 전체를 감싸는 부모 태그  : 표의 행(row)을 나타내는 자식 태그, 안에 포함  : 표의 ..