전체 글 621

[41-12 HTML] a, url, href, 앵커 태그, html element, attribute, destination, link text

HTML의 a 태그는 앵커 anchor의 첫 글자이다. attribute : href - href는 hyperlink reference의 약자로 새로운 창으로 연결시켜주는 링크이다. - 하이퍼링크는 현재 위치에서 웹페이지, 이메일 주소 등 새로운 목적지로 연결한다. 1) 목적지 : URL 링크 텍스트 a : HTML element(HTML 요소) href : HTML attribute(HTML 속성) URL: Link Destination(목적지) 링크 텍스트: Link Text(이 하이퍼링크에 대한 소개) 올리비아코딩스쿨 블로그 2) 목적지 : 파일 디렉토리 링크 텍스트 이번에는 URL이 아니라, 동일한 폴더 안( 같은 hierarchy에 파일을 생성한 후, 목적지로 해당 파일 디렉토리를 적는다. 다시..

HTML & CSS 2022.10.07

[41-11 HTML] 이미지 요소, 웹사이트에 이미지 넣는 방법, img, src, url, local directory, alt, 대체텍스트, 검색엔진 향상 방법

HTML의 이미지 요소와 웹사이트에 이미지를 넣는 방법을 소개한다. attribute: src, alt - 이미지 태그는 자체종료이므로 닫아줄 필요가 없다. - 하지만 이미지요소(element) 자체만으로 존재할 수는 없고, 속성(attribute)인 src가 꼭 들어가야 한다. - src에 들어갈 수 있는 방식은 url, local directory로 총 두 가지이다. 1) src에 들어갈 수 있는 방식 중, 첫 번째로 URL로 표기하는 방법이다. 먼저 URL을 얻기 위해, 웹사이트에서 마우스 오른쪽 버튼 클릭하여 이미지 주소를 복사한다. 2) src 요소 옆에 alt 요소도 적어주면 좋다. alt는 alternative 대체하다의 앞글자로, 해당 이미지를 설명하는 내용을 넣으면 된다. 브라우저가 이미..

HTML & CSS 2022.10.07

이미지 원형으로 자르기 해주는 무료 웹사이트

내 이미지를 원형으로 잘라주는 무료 웹사이트를 소개한다. https://crop-circle.imageonline.co/ Crop a circle in image online - free tool Supporting file formats Most of the common image formats like (.jpg, .jpeg, .png, .bmp etc..) are supported, you can upload any type of images, irrespective of size and dimensions to do a circle cropping. crop-circle.imageonline.co 1. 파일 업로드 2. 위치 조정하고, 원형으로 자르기 3. 다운로드하기 png 형식으로 다운로드 되..

HTML & CSS 2022.10.07

[41-10 HTML] p, em, i, strong, hr, ol, ul, li, type

paragraph의 첫 글자로, 단락 태그이다. 새로운 단락을 만들어준다. Olivia, Kim 파이썬 문법, 메타버스, 머신러닝, 인공지능을 즐겁게 배우고, 열정있게 가르칩니다. em, i 모두 기울임체로 표현해주는 코드이지만, 이면의 의미가 조금 다르다. em은 단순히 스타일을 넘어, 강조, 강세의 의미를 담는다. '강조'를 할 때, 기울임체를 사용 Olivia, Kim 파이썬 문법, 메타버스, 머신러닝, 인공지능을 즐겁게 배우고, 열정있게 가르칩니다. 기울임체를 사용 Olivia, Kim 파이썬 문법, 메타버스, 머신러닝, 인공지능을 즐겁게 배우고, 열정있게 가르칩니다. b, strong 모두 bold체를 표현하지만, strong은 단순한 스타일을 넘어 중요한 부분이기 때문에 굵은 글씨로 표현한다는..

HTML & CSS 2022.10.07

[41-9 HTML]atom 패키지 설치 방법, 패키지 추천, beautify, emmit

아톰은 필요한 다양한 부가 기능을 패키지로 제공하는데 패키지를 설치하면 프로그래밍을 하는데 매우 편리합니다. 1. 패키지 설치방법 File> Setting 패키지명 검색 ex) beatify 원하는 패키지 탐색, 확인 install 실행 - beautify 실행 전, 실행 후 사진 2. 패키지 추천 - emmet html/css 코딩 속도 향상시킴 -file-icons 아이콘을 예쁘게 바꿔줌 -highlight-selected 마우스로 더블클릭한 단어를 하이라이팅 해줘서 편리함

HTML & CSS 2022.10.07