본문 바로가기

전체 글83

입문) 자바스크립트 기초 (변수, 함수) 웹페이지에서 자바스크립트의 역할에 대해 알아보자. 자바스크립트(감독역할) : 웹 페이지에서 활동적인 기술 구현한다. 자바스크립트가 CSS보다 우선순위가 높다. 자바스크립트가 CSS 와 협력하는 바람직한 방법 : CSS의 클래스를 통해 입력해준다. 제이쿼리 : 자바스크립트를 좀 더 편하게 사용할 수 있도록 해주는 도구 이다. https://codepen.io/pen 에서 실습하기. 자바스크립트 자바스크립트의 첫 줄에는 늘 작성 해줌 console.clear(); window는 생략 가능. window.console.clear(); window[console].clear(); 위는 모두 같은 작성법. console.clear(); console.log(1,2,3,4); // log 로 출력함 자바스크립트를 .. 2023. 7. 3.
입문) HTML 과 CSS (반응형 12칼럼 그리드 만들기) 그리드 프레임워크 만들기 12칼럼의 단점: 5분의1을 불가함 . 기본1 (col col-xs-1 로 12칼럼으로 일괄 적고나서 숫자 부여하기 ) HTML 12칼럼 반응형 그리드 123 CSS div.container { margin:0 auto; max-width:980; } div.row { margin:0 -15px; } div.row::after { content: ""; display:block; clear:both; } div.row > div.col { float:left; box-sizing:border-box; width:100%; padding:15px; } /*테스트용 코드*/ div.row > div.col::after { content: ""; display:block; height.. 2023. 6. 29.
입문) HTML 과 CSS (반응형 그리드 , 범용클래스 ) 범용 클래스 : 엘리먼트의 맞춤 . 기존 클래스명에 추가 가능. ex) 레이아웃 : 한줄 한줄 공간 % 로 만든다 프레임워크 : 사이트를 여러개 만들 때 중복적으로 사용되는 CSS 틀 HTML 레이아웃 CSS div.container { max-width:980px; margin:0 auto; background-color:blue; /*마무리에서 삭제하기*/ border:10px solid gray; } div.row::after { content:""; display:block; clear:both; } div.row { margin-left:-10px; margin-right:-10px; } div.row > div.col { float:left; width:25%; /*화면에서 4등분되어 나옴. .. 2023. 6. 28.
입문) CSS (반응형 그리드) 그리드 란 ? 격자구조 레이아웃 디자인 요소를 하나하나 쌓아 가는 것 미디어 쿼리 ★★★ CSS에 있는 거의 유일한 조건문 ( and 가능 ) @media (max-width: 500px) { color:red; }=== 최대 화면 500px 까지 red컬러 @media (min-width:1000px) ===최소 너비가 1000px 이상일때 작동 범용 클래스 (미디어 쿼리를 이용한 브레이크 포인트) CSS 작업을 줄여주는 것 ( 기성복 ) 음수마진 부분 유령화 / 부모 때문에 특정 공간이상이 생기지 않을 때 마이너스 마진 사용함 (margin , border , padding 으로 공간이 생기지 않을 때 마이너스) CSS 속성 height : 높이 margin : border 밖 화면과의 외부여백 (많.. 2023. 6. 11.

티스토리툴바