유니의 코딩공부

간단한 입출력 방법 결과값을 표시하는 출력 방법 alert() confirm() : 확인 , 취소 버튼이 있음. 사용자의 선택 여부에 따라 결과 값이 달라지게 프로그래밍 할 때 사용 prompt() : 사용자에게 값을 입력할 수 있도록 한 줄짜리 text필드가 표시 됨 사용자가 입력한 값이 변수에 저장 document.write() : 출력 결과를 웹브라우저 화면에 표시 console.log() : 콘솔창에 내용 표시 ctrl + shift + J 자료형 리터럴 템플릿 문자열과 변수를 연결할때 +없이 사용하기 위해 나옴 백틱` 사용

transform : 웹 요소의 위치나 크기를 바꿈으로써 시각적인 효과를 만들어 줌 위치를 옮길경우 : translate 함수 사용 크기 조절할 때 : scale 함수 사용 rotate : 회전시키는 함수 양수 : 시계 방향 음수 : 시계 반대 방향

개발자 도구에서 확인 할 수 있음

background-color - 배경색 지정 background-image : url('폴더 경로'); -배경 이미지 지정 옵션을 주지 않으면 웹 화면에 가득하게 표시되는 것이 기본 옵션 background-repeat : 가로로만(repeat-x), 세로로만(repeat-y) 반복하게 하고 싶은 경우 사용하는 옵션 background-position : 배경이미지 위치 변경 background-attachment : 배경 이미지

둘 이상의 선택자를 연결해서 특정한 요소를 선택하는 방법 id값이 containter인 요소와 이 요소를 부모로 하는 하위의 모든 p요소 자식 요소 : 자식에만 적용 시킴 컨테이너 밑에 있는 자식p에만 적용됨 형제 선택자 h1 ~ p h1다음 첫번째p 태그에만 적용시키고 싶은 경우 인접 형제 선택자 : h1 + p 속성 선택자 href가 있는 속성에만 스타일을 지정하고 싶은 경우 href="#"인 경우에 cursor를 마우스로 하고 싶은 경우 가상 클래스 링크에 많이 사용 됨 :link :visited :hover :active 순서를 지켜주어야 한다. 순서를 지키지 않으면 적용되지 않는 경우가 있음 link와 visited를 똑같이 묶어서 지정 hover 마우스를 올렸을때 마우스 오버하면 배경은 짙은색..

float 속성: 왼쪽, 오른쪽으로 떠 있게 할 수 있음 float 속성: 왼쪽, 오른쪽으로 떠 있게 할 수 있음 사이드 바를 이용해서 왼쪽, 오른쪽에 배치할 때 많이 사용 해지하고 싶은경우 clear box4는 float영향을 받지 않게 됨 position : 요소 위치 지정할때 사용 margin : 20px auto(좌우를 auto로 주면 화면의 중앙에 둘 수 있); static : 기본. 웹 소스가 나열된 순서대로 화면에 나열 relative : 소스 작성 순서대로 배치 & 위치 값 지정 가능 absolute : 부모, 상위 요소에서 postion:relative가 기준점이 됨. 소스 위치와 상관 없이 위치 값 지정 fixed : 위치값 고정

블록 레벨 요소 : 자체가 브라우저 화면에서 한 줄을 차지 인라인 레벨 요소 : 필요한 영역만 차지 box-sizing : box모델의 넓이 계산할때 보더박스까지 계산을 포함해서 넓이가 200px이라는 의미 첫번째 박스 크기 : 260 (200+양쪽20+양쪽10) 두번째 박스 : box-sizing 200으로 설정했기 때문에 padding과 border까지 포함해서 200인 것을 알 수 있음 각각 따로 지정할 때 가장먼저 border-style지정 필요. 없으면 테두리 그려지지 않음 한꺼번에 지정하는 border속성인 경우는 순서 상관 없음. border-width : 5px(top,bottom) 10px(right, left)

글꼴 지정할 때 모든 사람의 컴퓨터에 있는 글꼴로 지정필요 웹 폰트 사용. 상대방이 폰트를 다운로드해서 사용할 수 있게끔 폰트파일 업로드 필요 em : 대문자 M의 폭 크기가 1em 웹폰트 1) 사용자 시스템에 설치 되어 있지 않은 폰트를 내가 사용하려고 할 때, 폰트 정보를 서버에 올려놓고 사용자가 사이트에 접속했을때 다운받아 사용 2) 웹상에 있는 폰트정보를 링크로 사용 가능. 네트워크에 영향 받아 사이트 속도가 떨어질 수 있음 select this style하면 @import가 보임 첫번째 글꼴을 가져올 수 없을 경우에 , 두번째 글꼴을 사용하라고 지정해줌 text-align text-decoration : 텍스트 링크를 만들면 밑줄이 생기는데, 없앨 때 많이 사용 그림자 가로5px 세로5px 번지..

전체 선택자 : 웹 문서 전체에 적용 되는 선택자 브라우저에 기본 스타일이 적용되어 있는데 초기화 시키고 싶을 때 사용 *를 기호로 사용 타입(태그) 선택자 : 특정 태그에만 적용하고 싶은 스타일을 만들 때 사용 class 선택자 : 특정한 부분에만 다르게 적용하고 싶은 경우 사용. 문서 안에서 여러번 사용 가능 앞에 .를 붙임 위와 같은 예제에서 "레드향"이라는 글자 일부에만 적용하고 싶은경우 태그를 사용하여 묶어 줌 id 선택자 : 문서 안에서 1번만 사용 가능 고유성을 가지기 때문에 자바스크립트 같은 경우에도 한 부분만 집어 프로그래밍에 사용 가능 #를 붙여 사용 padding: 테두리와 그 안에 있는 여백 그룹 선택자 : 같은 스타일 규칙을 가진 선택자를 그룹으로 묶어 나열 가능 마지막 p타입이 ..

인라인 스타일 : 태그 안에 직접 style을 씀 스타일 시트 : 여러 개의 스타일을 모아 놓은 것 /head태그 앞에 사용. 스타일 정보를 body전에 알려줘야 파일을 불러와 준비 함 body태그 전에 적어 주어야 함 선택자: 스타일을 어디에 적용할지 설정해줌 외부 css폴더에 있는 ex.css파일을 연결한다는 의미. 그파일은 스타일 시트이다.