코딩 기록들

Position - floating 보다는 좀더 세밀하고 정확하게 배치할 수 있는 방법 - 총 4개의 좌표가 있고, 해당 좌표에 배치를 하는 것. - 배치하는 방법에 따라 4가지로 구분 : relative, fixed, absolute, sticky (static은 기본값. 아무런 효과없음) - static : 정상적 흐름 : html을 작성한 순서 - relative : 상대배치 : element를 작성한 위치를 기준으로 'top, left, right, bottom' 좌표가 만들어짐, 가장많이 씀 - fixed : element를 (스크롤을 하더라도)항상 같은 위치에 배치시킴 - absolute : 절대적인 위치를 지정해줌. -> 문서 내에서 절대적인 위치 지정. 개인쇼핑몰에서 배송일정 팝업 띄울때 ..

Text decoration - 텍스트의 색상이나 밑줄, 굵기, 크기 등을 처리할 수 있음 - 이름으로 쓰는 단색 ex)red, blue 은 안씀 - 색을 만들어서 쓴다 : red = rgb(255, 0, 0); or #FF0000; -- 이때, #FF0000 의 경우 2자리단위로 같은게 2개씩 있으면 하나로 줄여도 됨-> #F00 color - 텍스트의 색상 변경 text-decpration - 텍스트에 밑줄그음 font-weight - 텍스트의 굵기 조절(100~900범위의 숫자, bold 등 쓸수 있음) font-size - 텍스트의 크기 변경 * font-size를 %, em, rem 등으로 지정할 경우, 브라우저의 기본 텍스트 크기를 기준으로 계산 * - Edge: 설정 -> 브라우저 디스플레이..

Margin collapsing - Margin 을 가진 엘리먼트가 나란히 있을 때, 중첩된 Margin은 제거된다(Margin이 더 큰 쪽으로 덮어씌운다) Width & Height - Inline Element를 제외한 Block Element, Inline-Block Element의 폭(width)과 높이(height)를 지정할 수 있다 - 높이와 너비는 항상 부모 Element의 영역 내에서만 할당된다. (부모 width가 300px이라면, 자식의 width에 100% 주면 300px이 된다) width와 height는 Percent로도 값을 지정할 수 있다 - width 는 100%를 줄 수 있지만, height는 100% 주기 힘들다 - 만약, div의 높이를 100%로 설정하면? : 아무변화..

What is CSS? html = 웹페이지를 구성하는 방식 (컨텐츠를 추가 & 보여줄 때 사용, 웹페이지의 필수사항) CSS (Cascading Style Sheets) : html을 꾸밈. (색, 그림자효과 부여 & html위치 조정 등 html요소가 화면또는 기타 미디어에 표시되는 방법을 작성), 계단식 스타일의 문서(부모태그에 CSS가 정의되면 자식태그에도 동일하게 적용됨) - selector : css를 누구에게 지정할것인지 대상 선택(id, class, attribute, sudo, universial, tag ... ) - declaration : 스타일 정의, 여러개 작성할수 있음, ';' 세미클론으로 구분 - property : 이미 css에 존재하는 값 body { background-..

HTML의 주요 공통 속성 (Attributes) - 모든 태그에 쓸수있는 속성들 (java script에서 쓰기위한 용도) - accesskey : alt누르고 다른걸 눌렀을때 포커싱 - data : 데이터의 변수. 태그에 필요한 데이터(변수)를 지정할 수 있음( java script로 제어하기 위한 속성. 쇼핑몰(ex쿠팡)에 굉장히 자주 쓰임) - hidden : 보여주고싶지않을대 사용 - id : 북마크 기능을 만들때 활용 -> 한 페이지 안에서 반드시 고유해야한다 - style : 색, 굵기 등 css용도를 tag에 부여 - tabindex : tab를 눌러 선택하기 위함. 장애인차별방지법(시각장애인이 주로 사용) - title : 시각장애인이 주로 사용. 해당하는 값을 장치가 읽어줌. title..

vedio태그 - https://www.w3schools.com/html/html5_video.asp - 상세속성 https://www.w3schools.com/tags/tag_video.asp - 유트브같은 영상 표현할때 - DFY(https://www.dfy.co.kr/) 처럼 영상을 배경에 깔고 홈페이지 구성하고 싶을때 사용 Your browser does not support HTML video. Video courtesy of Big Buck Bunny. audio태그 - https://www.w3schools.com/html/html5_audio.asp Your browser does not support the audio element. controls 대신 autoplay loop 주면 위..

HTML5 문서구조 HTML (hyper text markup language) - 태그(= node = element)를 조합해서 하나의 문서를 만드는언어 - 브라우저로 결과를 즉시 확인해볼수있다(= Client Side Language) HTML의 구조 head 의 태그들 : 브라우저에 나타나지 않는다 title : 사이트에 보여지는 제목 meta : 반응형 웹 script : 자바스크립트 작성 style : html꾸밀때 body의 태그들 : 브라우저에 전부 다 노출됨 html의 표준 : 오페라 https://www.opera.com/ko/computer/thanks?ni=stable&os=windows - 우클릭 후 요소검사 누르면 개발자도구 볼수있음 ( head - meta charset = "..

div 태그 = division - 화면을 분할시키려는 목적으로 사용. 단, 띄어쓰기 많이한건 표시안됨 - 웹페이지를 만들때 *가장*많이 쓰는 태그 중 하나 p 태그 - 문장과 문단을 구분 - paragraph : 문장을 작성할 때 사용 - p태그를 두번쓰면, 아래와 같이 문장과 문장이 떨어져 표현된것을 확인할수있음 SPAN 태그 - 문자를 감싸기만 한것은 아무런 기능도 적용이 안됨. 꾸며줘야됨ex) Headlines 실습 (글씨크기) 기사 따라하기 (Headline 실습) https://n.news.naver.com/sports/wfootball/article/477/0000476940 김민재, 투헬 떠나보내고 새 감독 맞이한다..."뮌헨, 알론소와 긍정적인 초기 회담 진행"→ "리버풀은 부담" 입력2..