본문 바로가기

분류 전체보기

(153)
실습) Plum 페이지 큰 구조 먼저 잡기header랑 main footer 감싸고 있는 wrap 필요css 리셋파일에 추가로 아래와 같이 아웃라인 없애줬다. input,select,textarea {  outline: none;}header    cssbody { font-family: "Roboto", sans-serif; font-size: 20px; line-height: 38px; /*라인하이트는 글꼴 사이즈의 두배 조금 안되게 잡아준다*/ font-weight: 300; color: #3f3d56;}#wrap { width: 100%; height: auto;}먼저 body를 불러와서 기본적으로 쓸..
[자바스크립트] - 변수 var / document.write("데이터") / console.log(데이터) var num = 2.1234;      var maxNum = Math.max(10, 5, 8, 3), //10        minNum = Math.min(10, 5, 8, 3), //3        roundNum = Math.round(num), //2        floorNum = Math.floor(num), //2        ceilNum = Math.ceil(num), //3        rndNum = Math.random(), //랜덤한 숫자        piNum = Math.PI; //3.14... 여러 개의 변수를 한꺼번에 선언할 때 아래처럼 , 로 구분하면 var를 한번만 쓰고도 여러 변수를 만들 수 있다. 마지막 끝낼때는 ; 로 끝내기변수 변수는 변하는 값을 저장할 수 있는..
★ 브라우저 랜더링 과정 브라우저 랜더링 과정은 도메인 주소(http://www.~~~.com)를 브라우저에 요청할 때 해당 html과 css, javascript를 불러와서 화면에 표현하는 과정을 뜻한다.  1. HTML 파일을 파싱: 웹 브라우저에서 HTML 파일을 읽어오고 구조를 해석하는 과정을 말한다. 브라어작 HTML 문서를 파싱하면 DOM(Document Object Model)트리를 만든다. DOM은 웹 페이지의 구조를 표현하는 트리 구조로, 각 요소는 노드로 표현됨.  2. CSS 파일을 파싱: HTML 파싱 후에 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. CSSOM은 스타일 규칙을 표현하는 트리구조로 각 스타일 규칙은 노드로 표현됨. 3.  DOM과 CSSOM을 결합: 브..
[html] 하나의 태그에 class 이름 여러 개 짓고 싶을 때 div class="form_inner_box areabox">공백으로 구분해서 이름을 여러 개 지어준다. 이름 1 : form_inner_box 이름 2: areabox css에서 가져올 때는 .form_inner_box.areabox {  width: fit-content;  height: fit-content;  display: flex;}공백없이 이름들을 연달아 적어줘야한다..form_inner_box.areabox  -> O.form_inner_box .areabox  -> X
[자바스크립트 기초 ] - 작성 규칙(코딩 컨벤션) / 내부 외부 스크립트 * 코딩 컨벤션 : 코딩에서 약속된 규칙을 말한다. 자바스크립트는 오류가 나면 그 아래 코드들은 실행하지 않는다. = 코딩 컨벤션 / 코딩 스타일 >1. 자바스크립트는 대/소문자를 구분하여 작성해야한다.  대소문자 틀리면 오류난다.ex) document.write(); -> 올바른 문법  /   Document.Write(); -> 틀린 문법. 오류난다.  2. 코드를 한 줄 작성한 후에는 ; 으로 마무리 해야한다. 세미콜론을 쓰지 않고 한 줄에 두 개의 코드를 작성하면 오류난다.한 줄에 한 문장만 쓰는 것이 가독성이 좋음. 3. 문자형 데이터를 작성할 때에는 " "(큰 따옴표)와 ' '(작은 따옴표)의 겹침 오류를 조심해야한다. 교차되면 안된다.ex)  document.write('hello '지구' ..
[CSS] 메뉴바 2차메뉴 숨길 때 / 정리 2차메뉴 만들때 높이값은 overflow:hidden 으로 선언.2차메뉴를 숨길때는  overflow:hidden 과 height:0; 같이 써서 숨겨야한다.다시 나타날땐 2차메뉴의 높이값을 계산해서(line-height 값으로 높이줬으면 그렇게 계산) hover에 height: 값px를 적용해준다. 거기에 transition을 적용해서 스르륵 펼쳐지게 해준다.  ▶ 2차메뉴에 마우스가 올라갔을 때 배경 색이 바뀌게 할려면hover를 a태그가 아닌 li에 적용해야한다. 마우스가 올라갔을 때 같이 글씨 색도 바뀌게 할려면 a랑 li랑 각각 따로 적용해줘야한다. .submenu li:hover {  background-color: rgb(223, 241, 255);} ▶ 1차메뉴에 마우스를 올렸을 때 전체 ..
[CSS] animation 애니메이션 속성 animation 애니메이션 속성 :움직임(모션효과)을 만드는 속성. 해당 속성을 적용하면 해당 html 페이지가 로드되었을 때 바로 시작한다.from : 시작지점  to : 끝나는 지점을 말한다. animation:  아래 속성들을 한꺼번에 선언animation-delay: 0s;~초동안 지연시킴 / 이벤트 발생 또는 페이지 로드 후 몇 초 뒤에 애니메이션을 실행할지 결정animation-direction: 애니메이션의 진행방향 / alternate : 왕복 / normal: from에서 to로 띡띡  계속 이동animation-duration:0s;~초동안 애니메이션을 진행시키겠다. animation-iteration-count:몇 번 애니메이션을 진행할지 결정 / animation-iteration..
실습) lnb 아코디언 메뉴바 / 2차, 1차 메뉴 css 정리 서브페이지에 메뉴들을 lnb 라고 한다.  html 구조더보기 MENU1 menu1-1 menu1-2 menu1-3 menu1-4 MENU2 menu2-1 menu2-2 menu2-3 menu2-4 MENU3 menu3-1 menu3-2 menu3-3..
[CSS] transition 변환 속성, 움직임을 부드럽게 처리하는 속성 transition-duration :~초동안 변화하겠다. transition-duration:1s;transition-delay :지연. 사용자의 행위 후 ~초 뒤에 변화하겠다. transition-delay:2s;transition-property :특정 요소만 지정하여 transition을 적용시키겠다. transition-property: background-color, width;transition-timing-function :linear 시작부터 끝까지 같은 속도로 트랜지션을 진행한다. ease처음에는 천천히 시작해서 점점 빨라지며 마지막에는 천천히 끝낸다. 기본값.ease-in 맨 처음 시작을 느리게 함ease-out 마지막을 천천히 끝냄.ease-in-out느리게 시작해서 느리게 끝냄* ..
[CSS] transform 변형속성 ★ transform : 변형속성 브라우저 화면의 x,y,z 축을 이용해 태그의 모양을 바꿔주는 속성.x축과 y축을 사용하는 변형 속성을 2차원 화면 좌표라고 부르고, 여기에 z축이 추가되면 3차원 화면 좌표라고 부른다.  z축은 브라우저를 보는 유저에게 가까울수록 양수값이다.   *각각 쓸 때는 x y z 를 대문자로 써야한다.  * 한꺼번에 쓸 때는 띄어쓰기로 구분한다.  transform: rotateY(0deg) translate3d(0px, 0px, 150px);2차원 변형함수transform-translate(x,y)원래 자기가 있던 자리가 기준으로, 해당 축으로 특정 크기만큼 이동함.  transform: translate(100px, 20px);transform-scale(x,y)박스의 중..