html, css, js
-
[CSS] 반응형 웹, 미디어 쿼리html, css, js 2023. 2. 19. 23:58
우리가 웹 사이트를 만들때 스마트폰이나 태블릿 등 브라우저 환경이 다양하게 바뀐다, 그떄마다 웹 사이트를 다르게 제작하는것은 쉽지않기떄문에 기존 웹사이트 내용은 그대로 유지하면서 다양한 화면 크기에 맞게 표시하는 법 -> 반응형 웹 디자인 가 필요하다. 반응형 웹 디자인이란 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다. 모바일 기기를 위한 뷰포트 pc화면과 모바일 화면에서 표시되는 픽셀에서 차이가 있다, 그래서 pc에 맞게 제작한 사이트는 모바일기기에서 접속하면 모든 내용이 작게표시된다. 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있기때문에 모바일 기기에 적합한 사이트를 제작하려면 뷰포트를 사용해야한다. 뷰포트 지정하기 뷰포트..
-
[CSS] transform속성, 트랜지션, 애니메이션html, css, js 2023. 2. 17. 14:23
transform과 변형 함수 CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야한다. transform: 함수 웹 요소를 이동시키는 변형 함수는 translate 예를들어 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자. photo를 정의하면 다음과같다. .photo {transform: translate(50px,100px);} 2차원 변형과 3차원 변형 2차원변형은 웹 요소를 평면에서 변형한다. x,y축 수평방향으로 이동하거나 수직방향으로 왜곡하는식 3차원변형은 x,y,z축 z축은 앞뒤로 이동하며 보는사람쪽으로 다가올수록 커지고 뒤로갈수록 작아짐 2차원 변형 함수 3차원 변형 함수 웹 요소 이동시키는 translate() 함수 transla..
-
[CSS] 고급 선택자(연결선택자,속성선택자,가상클래스 선택자)html, css, js 2023. 2. 16. 17:37
#연결 선택자 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 현재요소를 기준으로 바로 한단계 아래 요소를 자식 요소라고 한다. 자식 요소 한단계아래는 손자요소라고 한다. 하위 선택자 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며! 자손선택자라고도 부른다. 자식요소뿐만 아니라 모든 하위요소까지 적용된다. 하위선택자는 상위요소와 하위 요소를 공백으로 구분한다. 상위요소 하위요소 만약 section요소에 포함된 p요소를 모두 선택하려면, section p {. } 예약 방법 & 사용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx)로 문의 바랍니다. 가족실(2~4인) : 6..
-
[CSS] 배경색 꾸미기(background, 그러데이션)html, css, js 2023. 2. 15. 21:11
#배경색과 배경 범위지정하기 배경색을 지정하는 background-color 속성 16진수나 rgb, 색상이름을 사용해서 지정합니다. 중요! background-color속성은 상속되지 않는다.!! background-color: #008000; background-color: rgb(0,128,0); background-color: green; 배경색의 적용 범위를 조절하는 background-clip 속성 박스모델의 테두리까지 적용할지, 패딩까지 적용할지, 컨텐츠에만 적용할지 등을 선택할 수 있다. border-box : 테두리까지 적용된다. 기본값 padding-box : 패딩까지만 적용된다. content-box : 콘텐츠에만 적용된다. 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 ..
-
[CSS] 박스모델(content,padding,border,margin)html, css, js 2023. 2. 14. 20:27
블록레벨 요소와 인라인 레벨 요소 블록레벨 요소란 : 태그를 사용해 요소를 삽입했을때 혼자 한줄을 차지하는 것을 가르킨다. 한 줄을 차지한다는건 해당 요소의 너비가 100%라는 뜻, 따라서 블록레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 대표적으로는 , , 등이 있음 시간이란... 내일 죽을것처럼 오늘을 살고 영원히 살것처럼 내일을 꿈꾸어라 인라인 레벨 요소는 콘텐츠만큼만 영역을 차지하고 나머지 공간에 다른 요소가 올 수 있다. 따라서 한 줄에 인라인 레벨요소를 여러개 표시할 수 있다. 대표적인 태그로 , , 등이 있다. 박스 모델의 기본 구성 웹 문서의 블록 레벨 요소는 모두 박스 형태이다. 스타일 시트에서는 이렇게 박스 형태인 요소를 박스모델 요소라고 한다. 박스 모델은 콘텐트영역, 박스..
-
[CSS] display 속성html, css, js 2023. 2. 14. 16:58
display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나이다. block 레벨 요소 display 속성값이 block인 요소는 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다. , , , , , 등 width와 height 속성을 지정할 수 있다. 그러나 블록 요소는 가로줄을 모두 차지하므로 다음 요소가 오른쪽에 배치될수있어도 항상 다음줄에 배치된다. inline 레벨 요소 display 속성값이 inline인 요소는 새로운 라인에서 시작하지 않는다, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML content만큼만 차지한다. , , 등 width나 height를 지정할 수 없다. width를 임의로 바꾸더라도 크기는 content의 길이만큼이다. inline..
-
[CSS] 스타일 속성 모음html, css, js 2023. 2. 14. 00:26
#글자와 관련된 속성 font-family : 글꼴 종류를 지정 font-size : 글자 크기를 지정 font-style : 글자를 이탤릭체로 표시할것인지 지정 font-weight : 글자의 굵기를 지정 #텍스트 스타일 속성 color : 글자색을 지정 text-decoration : 텍스트에 밑줄이나 취소선을 표시할지 여부 결정 text-transform : 텍스트 전체 또는 첫 글자를 대문자로 표시한다.(영문자만) text-shadow : 텍스트에 그림자 추가 line-height :줄 간격 조절 letter-spacing : 자간(글자 사이 간격) 지정 text-align : 텍스트 정렬 방법 지정 #테이블 관련 속성 background : 배경색지정 caption-side : caption 태..
-
[CSS] 텍스트를 표현하는 다양한 스타일html, css, js 2023. 2. 14. 00:18
기본형 기호 이해하기! 1. |는 나열한 옵션 중 하나가 값이 되어야 한다는 말이다. font-size: 값1 |값2 |값3 2. 는 나열할 때 특정값이 아닌 ~한 유형인 경우 사용한다. font-size: || #글꼴 관련 스타일 글꼴을 지정하는 font-family 속성 font-family: | [, ] 태그를 비롯해 , 처럼 텍스트를 사용하는 요소에서 주로 사용한다. 웹 문서에서 글꼴을 지정할때는 한 가지 글꼴만 선택하기도 하지만 글꼴이 없을경우를 대비해 두번째 새번째 글꼴까지 생각해야한다. 글꼴을 2개이상 지정할때는 두글꼴 사이에 쉼표를 넣어 구분한다. 두 단어 이상으로 된 글꼴 이름은 한 덩어리라는 것을 알 수 있도록 큰따옴표로 묶는다. body { font-fmaily : "맑은 고딕", 돋..