본문 바로가기

코딩 국비 학원

 (28)
[Do it! HTML+CSS+자바스크립트]트랜지션과 애니메이션 22.12.20 배운 내용 정리1 트랜지션과 애니메이션(변형 알아보기, 트랜지션 알아보기, 애니메이션 알아보기) 변형 알아보기 ① transform과 변형 함수 CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 함. 기본형 : transform: 함수 웹 요소를 이동시키는 변형 함수는 translate( )임. ex. 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용함. .photo { transform: translate(50px, 100px); } (1) 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형함. 예를 들어 수평 방향으로 이동하거나 수직 방향으로 왜곡함. 이렇게 평면에서 변..
[Do it! HTML+CSS+자바스크립트]CSS 고급 선택자 22.12.19 배운 내용 정리2 CSS 고급 선택자(연결 선택자, 속성 선택자, 가상 클래스와 가상 요소) 연결 선택자 ① 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 함. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 함. ※ 하위 선택자(자손 선택자) 하위 선택자(자손 선택자)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택함. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용됨. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분함. 기본형 : 상위요소 하위요소 하위 선택자를 사용하는 방법은 다음과 같이 se..
[Do it! HTML+CSS+자바스크립트]이미지와 그러데이션 효과로 배경 꾸미기 22.12.19 배운 내용 정리1 이미지와 그러데이션 효과로 배경 꾸미기 (배경색과 배경 범위 지정하기, 배경 이미지 지정하기, 그러데이션 효과로 배경 꾸미기) 배경색과 배경 범위 지정하기 ① 배경색을 지정하는 background-color 속성 background-color는 16진수나 rgb값 또는 색상 이름을 사용해서 지정함. 색상을 세밀히 조절하고 싶다면 16진숫값을 사용하고, 투명도도 함께 조절하고 싶다면 rgba 표기법을 사용함. ex. background-color: #008000; background-color: rgb(0, 128, 0); background-color: green; 글꼴이나 글자 크기 등은 태그 선택자에서 지정하면 문서 전체에 상속됨. 따라서 하위 요소에서 스타일을 수정..
[Do it! HTML+CSS+자바스크립트]레이아웃을 구성하는 CSS 박스 모델 22.12.18 배운 내용 정리 레이아웃을 구성하는 CSS 박스 모델 (CSS와 박스 모델, 테두리 스타일 지정, 여백을 조절하는 속성, 웹 문서의 레이아웃, 웹 요소의 위치) CSS와 박스 모델 ① 블록 레벨 요소와 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라짐. 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킴. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻임. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음. 블록 레벨 요소를 만드는 대표적인 태그로 , , 등이 있음. 반면에 인라인 레벨 요소는 한 줄을 차지하지 않음. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 ..
[Do it! HTML+CSS+자바스크립트]텍스트를 표현하는 다양한 스타일 22.12.16 배운 내용 정리 텍스트를 표현하는 다양한 스타일 (글꼴 관련 스타일, 웹 폰트 사용하기, 텍스트 관련 스타일, 목록 스타일, 표 스타일) 글꼴 관련 스타일 ① 글꼴을 지정하는 font-family 속성 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정함. 이 속성은 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소에서 주로 사용함. 기본형 : font-family: | [, ] 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시됨. 웹문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에 의도한 글꼴이 아닌 글꼴로 표시됨. 따라서 웹 문서에서 글꼴을 지정할 때는 두 번째, 세 번째 글꼴까지 생각해 둬야함. 글꼴 이름을 2개 이상 지정..
[Do it! HTML+CSS+자바스크립트]CSS의 기본 22.12.15 배운 내용 정리2 CSS의 기본(웹 문서에 디자인 입히기, 스타일과 스타일 시트, CSS 기본 선택자, 캐스케이딩 스타일 시트) 웹 문서에 디자인 입히기 ※ 스타일을 사용하는 이유 웹 문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 생각, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정 짓는 것을 가리킴. 이러한 작업을 HTML로 하지 않고 따로 스타일을 사용하는 이유는 ① 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있기 때문 HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작임. 이렇게 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리함. ② 다양한 ..
[Do it! HTML+CSS+자바스크립트]입력 양식 작성 22.12.15 배운 내용 정리1 (입력 양식 작성하기 : 폼 삽입, input 태그, input 태그의 주요 속성, 폼에서 사용하는 태그) 폼 삽입하기 ① 웹에서 만나는 폼 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있음. ex. 로그인 폼의 동작 과정 사용자가 아이디와 비밀번호를 입력하고 [로그인] 버튼을 클릭하면 입력한 정보는 웹 서버로 전송됨, 그럼 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인 후 그 결과를 웹 브라우저에 보냄. 폼과 관련한 정보는 모두 데이터베이스를 기반으로 작동함. 따라서 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만, 폼에 입력한 사용자 정..
[Do it! HTML+CSS+자바스크립트]웹 문서에 다양한 내용 입력 22.12.14 배운 내용 정리 (웹 문서에 다양한 내용 입력하기 : 텍스트, 목록, 표, 이미지, 오디오와 비디오, 하이퍼링크) 텍스트 입력하기 ① 제목을 나타내는 태그 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시하는데, 이렇게 자주 사용하는 제목 스타일을 미리 태그 형태로 만든 것이 제목 태그임 기본형 : 제목 태그에서 h는 제목을 뜻하는 heading을 줄인말임. n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있음. 이 가장 큰 제목이고 이 가장 작은 제목임. ② 텍스트 단락을 만드는 태그, 줄을 바꾸는 태그 기본형 : 내용 와 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐. 이때 기억해 두어야 할 점은 편집기에서 줄을 바꾸..

티스토리툴바