본문 바로가기

분류 전체보기

(85)
HTML,CSS,JS 8일차 자바스크립트 사용법파일명.js 파일을 만들어서 코드 작성 후 src 경로로 연결head 안에도 script 작성가능 (사용시 주의요함!)body 태그 내 가장 하단에 script를 위치시켜 작성 (가장 많이 사용)마지막 끝처리 ; (필수사항은 아님.)자바스크립트의 변수값을 담고있는 메모리 공간의 이름java => 자료형 변수명 (int, double, float, long .. 8개의 자료형)자바 스크립트는 변수를 선언하는 역할만 함. (자료형이 없음)var(비권장), let, constvar 변수의 중복선언이 가능.var a = 10; var a = [10,20,30]; => 가능let은 중복선언 불가능, 재할당은 가능 자바에서 사용되는 지역변수의 개념let name = '홍길동'; name = '김영..
HTML,CSS,JS 7일차 롯데월드 민속체험관 홈페이지 만들어보기코드를 블로그에 올리기에 너무 길어서 느낀점만 기재 header   .wrap{ width: 100%; min-width: 1200px;}.inner{ width: 1170px; margin: auto; box-sizing: border-box; /* background-color: aqua; */}/* header */header{ width: 100%; position: sticky; top: 0px; z-index: 10; background-color: white;}header>.inner{ height: 115px; position: relative;}header>.inner>h1{ position: absolute; top: 15px; left: 0;}he..
HTML,CSS,JS 6일차 Flex(플렉스) 속성float 속성이 부모의 높이를 인지못하는 번거로움을 줄이기 위한 속성레이아웃 배치 전용으로 고안기존방식보다 훨씬 강력하고 편리한 기능들이 많음.- 부모요소(컨테이너) : flex container- 자식요소(아이템) : flex item- container : flex의 영향을 받는 공간- 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는지 결정 container 설정- display : flex- flex-direction : 배치방향   row(가로) / column(세로)- flex-wrap : 줄넘김 방식   nowrap(줄바꿈없음) / wrap(줄바꿈)- justify-content : 가로방향 정렬 방식   flex-start / end   center   sp..
HTML,CSS,JS 5일차 배달의 민족 화면 만들어보기 IN'O Portfolio Make Hardware Soft The last dance of 어쩌고 저쩌고 abcd printce adgogo tot fpapfasfpoasfp gofvfovamfo b lbpflbpadb mbfpfdambfkbmfbpadkfb ofdkbpasfkspdvo dvkasdopvkasdo VIEW MORE
HTML,CSS,JS 4일차 z-index 속성요소가 겹쳐있을 때 어느 요소를 위로 보낼지 결정하는 속성정수의 값을 가짐 (양수만 가능)숫자가 높을수록 위로 올라감ex) DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        div.con{            width: 300px;            /* height: 700px; */            /* background-color: palegreen; */            border: 1px solid black..
HTML,CSS,JS 3일차 font 속성 font-size : 글자크기font-weight : 굵기 100~900 (보통700) font-family : 글꼴- 지정하려하는 폰트를 , 로 나열- 한글 폰트를 지정시 한글이름, 영문이름을 같이 지정- 기본폰트, 다른폰트, 기본형- 마지막은 항상 기본형을 지정- 폰트명을 띄어쓰기 없이 지정, 띄어쓰기가 있다면 " " 묶어설정 border 속성 border : 테두리 속성border-width : 두께border-style : 모양border-color : 색border-radius : 테두리 둥글게border-??-radius : 위치지정가능 background 속성 bg-color : 배경색bg-image : 배경이미지배경색과 배경이미지를 같이 지정하면 배경이미지가 우선이미지 사이즈..
HTML,CSS,JS 2일차 textarea 다중라인 입력 readonly, disabled, required(필수) 가능innerText로 인지시작태그와 끝태그 사이의 빈공간,enter, 띄어쓰기 전부 값으로 인지form태그 안에서 사용하면 name 속성의 변수 값으로 전송 가능 select제시된 항목 중 하나를 선택하게 하는 태그콤보박스, 드롭다운박스 형태로 쓰이는 태그select 태그안에  option 태그를 넣어서 목록을 구성option value = " 전송값 " value에 값이 없으면 공백으로 전송selected : 기본 설정값을 결정disabled : 비활성화 a태그다른 페이지로 이동하게 하는 태그시작태그와 끝태그가 안에 글자를 입력하면 => 클릭시 이동 href 속성- 이동할 url, 값이 없다면 현재 페이지에서 새..
HTML,CSS,JS 1일차 html 파일의 속성을 지정하기위한 태그 현재 페이지의 정보, 필요한  파일을 연결 작업을 함. 실제 화면에 보이는 내용을 작성.html 에서 enter는 줄바꿈이 아니라 공백하나로 인지(띄어쓰기 1칸)h태그 - 제목을 표현할 때 사용 ( h1~h6 ) 각 태그마다 고유한 크기와  두께가 정해져있음, 브라우저마다 다를 수 있음. : 줄 바꿈.태그는  세 종류로 구분.block 태그 - tag 하나가 한줄을 차지하는 태그inline 태그 - tag 하나가 본인이 가지고있는 글자만큼의 영역을 가지는 태그inlineblock 태그 -  block + inline span 태그 - 대표적인 인라인 태그 중 하나p 태그 - 대표적인 블록 태그 중 하나 한 문단을 구분b, strong 태그 - 글자를 굵게 만드는 ..