본문 바로가기

Web4

[HTML] 화살표 클릭시 화면 최상단으로 이동하는 기능 구현 - <a>, <img> 태그 아래 영상 17~20초 사이, 오른쪽 하단 화살표 클릭 시 화면 최상단으로 이동하는 기능 구현 https://youtu.be/H8oP8P-iHqg Code 코드는 상당히 간단합니다. 화살표 이미지에 링크를 걸어주는 방식입니다. 코드는 아래와 같으며 태그 요소들을 하나씩 짚어보겠습니다. 태그 태그는 HTML 문서에 이미지 링크를 거는 태그입니다. 이미지를 불러오기 위해 이미지 경로를 반드시 지정해주어야 하므로 "src = " 는 필수 값입니다. src 이미지 source의 경로 width 이미지의 너비 * style 속성은 태그에 css를 적용하는 것으로 "opacity: 0.5"를 통해 투명도를 50%로 조정한 것입니다. 태그의 더 많은 속성들은 다음 링크를 참고해주세요 (http://www.tcpsch.. 2022. 9. 15.
[마크다운] 링크 및 사진 삽입 링크 삽입 문법 결과 - 첫 번째 링크 넣기: [링크 표시 이름](링크 주소) => 링크 표시 이름에 링크가 삽입되어 표시 - 두 번째 링크 넣기: => 링크 주소만 표시 사진 삽입 문법 - 사진 넣기: [사진이 나오지 않을 때 표시될 이름](사진 링크 주소.파일형태 "사진 위에 마우스 올렸을 때 표시될 설명") 결과 - 만약 사진 주소가 틀리거나 다른 이유로 사진이 올라가지 않는다면 아래 사진과 같이 [ ] 안의 내용이 뜸 사진 업로드를 확실하게 하기 위해서는 주소가 틀리지 않도록 주소를 복사해서 붙여주도록 한다! 1. 사진과 같이 GitHub에 사진 미리 업로드 2. 이용하고 싶은 사진에 마우스 오른쪽 버튼 3. 링크주소 복사 4. 필요한 곳에 붙여 .. 2020. 5. 16.
[마크다운] 코드 블럭 및 줄넘김 문법 코드 블럭 코드블럭 문법: ``` 결과 - 첫 번째 코드블럭: 그냥 코드블럭 부호(```)만 넣은 결과 - 두 번째 코드블럭: 코드블럭 뒤에 'c'를 입력하여 코드블럭 안의 내용을 C 언어로 인식 줄 넘김 문법 결과 - 첫 번째 결과: 그냥 엔터키를 눌러 줄 넘김 하면 줄 넘김이 되지 않음 - 두 번째 결과: 줄 넘김 문법 을 넣으면 줄넘김 가능 - 세 번째 결과: 문법 사진의 커서 위치처럼 글 뒤에 띄어쓰기를 2번 이상 하면 줄 넘김 가능 2020. 5. 16.
[마크다운] 글자 크기 조절 및 강조 문법 Header 문법 결과 - 제목 문법(======, ------)과 Header 1, 2는 아래에 얇은 구분선도 함께 생긴다. - Header 문법 (#)를 이용할 때는 '#'와 글자 사에에 띄어쓰기 해야한다. 강조 문법 결과 - Header문법과 다르게 문법과 글자 사이를 붙여주어야 한다. 2020. 5. 16.