📘공부 기록장

CSS combinators(조합선택자) Empty Image Image2 This is not red. Here is a paragraph. Here is some code. And here is a red span! More code... And this is a red span! CSS attribute selector(속성선택자) Internal link Example link Insensitive internal link Example org link Hello World! Olá Mundo! 世界您好！ 世界您好！ ?世界您好！ One Two! Three Four CSS pseudo-classes(가상클래스) 가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 예를 ..

프론트엔드웹디자인 5주차 2차시 강의내용 코드 box-sizing:border-box; /*테두리를 포함하여 크기 지정, *는 모든 엘리먼트에 대한다는 것*/ box-shadow: 2px 2px gray; /*그림자를 넣는 것 오른쪽 그림자 크기, 아랫쪽 그림자 크기, 색상*/ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.5); /*세 번째 숫자는 번지는 효과의 크기를 의미함.*/ /*콤마를 사용하여 색깔을 덧입힐수있음*/ opacity: 0; /*투명도를 주는 것임. 0을 주면 사라짐. 있긴 한데 안 보이는 것뿐*/ 참고 https://coding-factory.tistory.com/187 [Html] Margin, Padd..

프론트엔드웹디자인 5주차 1차시 강의내용 필기로 대체...

프론트엔드웹디자인 4주차 2차시 강의내용 소스코드와 결과물 Home Location Our Story Home Best Carfull Service Go Carfull! 1.00 « - + » x

프론트엔드웹디자인 4주차 1차시 강의내용 html파일에 css를 넣는 곳은 두 가지로 나눌 수 있다. 1. 외부 (External) 2. 내부 (Internal) 외부 방식은 css 파일을 별도로 만들어서 적용하는 형식이다. Internal은 다시 두 개로 나뉜다. 1. style이라는 태그속에 css 구문을 넣는 것 2. 각 태그의 시작에 style을 속성으로 넣는 것(inline) 세 가지 방식 모두 섞어서 사용하지만, 기본적인 방법은 External이다. 외부 (External) - External을 연결할 때는 link라는 속성을 이용한다. 을 헤드 안에 넣어주면 됨. - 같은 테마를 사용하는 여러 페이지를 관리하기 용이하다. style 적용 순서는 위에서부터 내려오면서 스타일을 받기 때문에, 위..

프론트엔드웹디자인 3주차 2차시 강의내용 Frame 태그 기능 : 웹 페이지에 영역을 만들고, 그 영역에 여러 미디어 자료들(mp3, mp4, jpg 등)을 넣을 수 있다. 사용 방법 : Audio 태그 사용 방법 : Video 태그 사용 방법 : 유튜브 동영상 삽입 방법 : 1. 원하는 동영상의 링크를 복사한다. 2. 아래와 같이 iframe 태그 안에 주소를 넣어준다. 2번까지 한 후 확인해보면 위와같이 나온다. 3. 위 코드에서 watch?v= 부분을 embed/로 바꾸어주면 된다. 지도 삽입 1. 구글 지도 구글 지도에서 원하는 장소를 검색한 후, 공유 - 지도 퍼가기 - HTML 복사를 한 후 그대로 붙여넣기만 하면 된다. 2. 카카오맵 역시 원하는 곳을 검색한 후, 오른쪽 상단에 위치한 '내보..

프론트엔드 웹 디자인 강의 수업 주제 : HTML 태그(2) - 하이퍼링크, 비디오 및 오디오 태그 img태그, 하이퍼 링크 태그, 목록 태그 주요 학습내용 : 하이퍼링크 및 비디오 태그 img태그, 하이퍼 링크 태그, 목록 태그 img 태그 이미지가 많은 사이트를 만들 때 고려해야 할 점 - 이미지가 고 해상도면 네트워크 속도에 따라 이미지를 제대로 표시하지 못 할 수도 있다. - 따라서 이미지가 많은 사이트(갤러리 등)를 만들 때는, 편집 프로그램을 이용하여 이미지의 썸네일을 만들고 그 썸네일을 웹 페이지에 표현한다. - 사용자가 이미지를 클릭했을 때 원본 이미지가 다운로드 되도록 하이퍼 링크 작업을 해주면, 속도 문제를 해결할 수 있다. 이미지 경로 설정 - html문서가 들어있는 폴더보다 한 개 ..

HTML이란? - 하이퍼 텍스트를 만들기 위한 마크업 언어이다. - HTML을 이용하여 웹 페이지 작성이 가능하다. - 계층구조(트리구조, 내포구조)를 갖고있다. 문서 전체에 대한 제목 본문. 본문 본문 본문 = 이 문서가 html로 작성된 문서라는 것을 브라우저에게 알려주는 역할 ... = 트리구조에서 최상위에 위치 = title, style, meta 등을 포함 - title : 웹 페이지의 제목을 표현하는 요소 - style : CSS 구문 - meta : 브라우저에게 웹 페이지를 처리할 때 필요한 부가적인 정보들을 알려줌 (charseet) - 한글 인코딩의 종류는 두 가지이다 (UTF-8, EUC-KR). 웹 페이지를 제작할 때 세팅해둔 인코딩 방식과 브라우저의 인코..