본문 바로가기

전체 글

[HTML/CSS 기초 강의] ⑬ 선택자 selector 오늘은 선택자 selector에 대해 알아보려고 한다. 선택자(selector)- 스타일 적용 대상 지정/css 핵심 개념 내부 스타일 시트는 부분에, 외부 스타일 시트는 별도의 파일에 스타일 관련 코드 입력함. 웹 페이지 전체에 동일한 스타일 적용하면 문제가 안되지만, 일반적으로 웹페이지 각 부분마다 다른 스타일을 적용 ​예) 상단에는 바다 배경에 글 오른 정렬, 또 하단에는 배경 없이 일러스트 삽입에 왼쪽 정렬과 같이 부분적으로 다른 디자인인 경우, 각 스타일을 어디에 적용할지, 범위 지정해 줄 필요 있음 ​ ​1. 전체 선택자 어떤 스타일을 웹 문서 전체에 적용할 때 사용 *{속성명:속성값;} ​ 2. 태그 선택자 특정 태그에 스타일 적용할 때 사용 태그 선택자를 사용하면 같은 이름을 가진 태그 모.. 더보기
[HTML/CSS 기초 강의] ⑫ HTML에 CSS적용 오늘은 HTML에 CSS적용에 대해 알아보려고 한다. 웹 문서(HTML)에 CSS로 디자인 적용 방법 ① 인라인 (Inline CSS) - HTML 태그에 직접 적용 ② 내부 스타일 시트(Internal CSS) - 태그에 스타일 정의 ③ 외부 스타일 시트(External CSS) - 별도 파일 호출 1. 인라인 (Inline CSS) HTML 본문, 각 태그에 직접 CSS 코드를 입력하는 방식 html 태그 안에 style 속성을 직접 지정 장점: 가장 직관적이기 때문에 초보자 입장에서 익숙하고 편함 but CSS가 생긴 이유? 태그마다 스타일을 지정하는 것이 복잡하고 번거로움( Inline 방식) ​2. 내부 스타일 시트(Internal CSS) HTML 문서는 와 로 구성 는 웹 페이지에는 직접 표.. 더보기
[HTML기초강의] ⑪ 순서있는 <ol>,목록중첩 순서있는 ,목록중첩에 대해 알아보려고 한다. 1. 태그 항목을 나열할 때 태그 사용 2. 태그 항목들을 순서 있게 묶어줄 때 사용하는 것은태그, ol은 order list의 약자로, 순서 있는 목록 의미 3. 사용법 나열할 각 항목을 태그로 감싸준 후, 태그를 포함한 해당 항목 전체를 로 감싸기 항목1 항목2 항목5(?) ① 메모장을 열고 입력​ ② 아래와 같이 항목들 입력하고 , 태그로 감싸기 ③ , 태그로 나열한 항목들 묶어주기 ④ 목록의 제목은 태그 안에 써도 되고 h1에 써 줘도 됨 ​ 순서 있는 목록 태그 ol 블록 요소 / 자동으로 숫자가 부여 감자를 1/4 크기로 잘라욤 부드러워질 때까지 15분-20분 동안 소금물에 서서히 끓인다. 감자의 물을 따라 내고 으깬주세욤! 우유, 버터, 육두구를 .. 더보기
[HTML 기초 강의] ⑩ 순서 없는 <ul>, <li> 태그 순서 없는 , 태그에 대해 알아보려고 한다. 1. 태그 항목을 나열할 때 태그 사용 2. 태그 항목들을 순서 없이 묶어줄 때 사용하는 것은 ​ 태그, ul은 unordered list의 약자로, 순서 없는 목록 의미 3. 사용법 나열할 각 항목을 태그로 감싸준 후, 태그를 포함한 해당 항목 전체를 로 감싸기 항목1 항목1 항목(?) ① 메모장을 열고 아래 내용 입력​ ② 아래와 같이 항목들을 입력하고 , 태그로 감싸기 (글머리 기호는 태그를 이용해 자동으로 붙일 것이기 때문에 따로 기호를 붙이지 않음) ③ , 태그로 나열한 항목들을 묶어주기 ④ 목록의 제목은 태그 안에 써도 되고 h1에 써 줘도 됨 순서 없는 목록 태그 ul 블록 요소 감자 2개를 강판에 채썰기해욤! 채 썬 감자에 감자전분, 밀가루 한스.. 더보기
[HTML 기초 강의] ⑨동영상 삽입 iframe video 오늘은 동영상(video) 삽입 방법을 알아보려고 한다. 1. 태그 동영상을 삽입할 때 사용하는 기본 태그는 태그 iframe은 inline frame의 약자로 ‘내부의 틀’ 의미 이 태그를 사용하면 HTML 페이지에 틀을 만들고, 그 안에 다른 HTML 페이지를 보여줌. 예) 내가 만든 웹페이지 한쪽에 동영상이나 네이버 메인 페이지가 보이게 할 수 있다는 것이죠. 동영상이나 웹사이트를 연결할 때 저작권이나 악성코드 감염 주의!! 플레이 창 크기를 조절- 가로, 세로 길이를 픽셀로 정하기 2. 동영상 삽입 ​① 메모장을 열고 입력​ ② Youtube에서 동영상을 찾기 예) 고양이 검색 후 원하는 동영상 클릭 ③ 동영상에 마우스를 놓고 우클릭 [소스 코드 복사] 선택 ④ 복사한 소스 코드를 메모장에 붙여 .. 더보기
[HTML 기초 강의] ⑧ 이미지에 링크 걸기 오늘은 이미지에 링크 거는 방법을 알아보려고 한다. 1. 이미지에 링크 걸기 앞에서는 입력한 텍스트(=링크 이름)에 링크 걸기 링크 이름 오늘은 이미지를 클릭하면 특정 페이지로 이동 즉 이미지에 링크 걸기 링크 이름 자리에 이미지 태그 넣기 URL주소"> html 태그 안에 또 다른 태그 넣기도 가능 2. img src=" " ① 메모장에 과 입력 ② 원하는 이미지 주소 복사해서 이미지 태그에 붙여넣기 예) 구글에서 ‘독도’ 검색/ 오른 클릭 이미지 주소 복사/ 이미지 태그 따옴표 사이에 붙여넣기 3. a href=" " ③ 이미지 클릭했을 때 연결할 사이트 주소 복사/ 앵커 태그에 붙여 넣기 예) 외교부독도 사이트 주소를 복사 /앵커 시작 태그 따옴표 사이에 붙여넣기 [HTML 기초 강의] ⑦ 참조 ④.. 더보기
[HTML 기초 강의] ⑦이미지태그 오늘은 이미지태그에 대해 알아보려고 한다. 1. 태그 이미지를 삽입할 때는 image라는 단어에서 따온 태그 사용 src는 근원, 출처를 뜻하는 source의 줄임말로, src 다음의 큰따옴표 안에 이미지 주소를 쓴다. 이미지는 사이에 텍스트가 들어갈 수 없으므로 종료 태그를 사용하지 않는다. ​ ※ 참고로 href와 src는 둘 다 사용하려는 외부 자원의 주소로, 어떤 경우는 바꿔서 입력해도 가능 href는 링크를 클릭하는 것처럼 사용자가 원할 때에 외부 자원에 접속하는 것 src는 사용자와 관계없이 브라우저에서 페이지를 열면 외부 자원을 끌어오는 것 이미지를 불러올 때 사이즈를 정할 수도 있음-순서는 상관없음 이미지 태그 img 인라인 요소 빈 요소, 빈 태그로 종료 태그 없음 src="이미지 경로".. 더보기
[HTML 기초 강의] ⑥ anchor 태그 anchor 태그에 대해 알아보려고 한다. 1. anchor 태그? HTML 문서는 태그를 사용해서 문서의 구조를 정한다. 링크를 추가할 때 사용하는 태그는 태그 태그는 ‘닻’을 뜻하는 영어단어 anchor의 첫 글자를 딴 것으로 anchor 태그라고 부름 수많은 웹페이지로 이루어진 인터넷 바다의 어느 한 목적지, 페이지에 "닻을 내린다"는 의미 1) 이동하려는 실제 웹페이지 주소(=URL)와 내가 만든 웹페이지에서 보이는 링크 이름을 입력 2) 링크 이름은 URL 주소 또는 원하는 단어를 쓴다 ​ 예를 들어 실제 URL은 'https://www.tistory.com'이지만, 링크 이름은 ‘티스토리로 이동하기’라고 정할 수 있음 웹페이지에서 ‘티스토리로 이동하기’라고 쓰인 링크를 클릭하면 'https:/.. 더보기

티스토리툴바