본문 바로가기

728x90

HTML + CSS 시리즈🕸/HTML & CSS 시리즈(V 1.0)25

이미지 넣기 | HTML & CSS 시리즈 009 웹 만들때는 이미지를 삽입은 정말 빼놓을 수 없는 부분인 것 같다. 잘못코드를 작성하여 위와 같은 사진을 보게 될때! 아래의 방법을 다시한번 체크해보자! 이미지 삽입 어떻게 하는건데~~~? 위 와 같은 코드 작성시 웹사이트내에 있는 사진의 주소를 복사해서 삽입이 가능하다! 물론 이렇게 감당 되지 않는 사이즈가 출력 될 것이다. 그렇다면 사이즈를 설정해주면 된다. width = "300px" 를 입력시 가로가 300픽셀로 설정되며 세로 길이는 그에 맞게 자동으로 설정되어서 아래와 같이 출력이 된다. 그럼 이렇게 작아진다! 그렇다면 웹페이지가 아닌 컴퓨터내에 저장되어있는 사진파일을 출력할때는 어떻게 하는지 알아보자 컴퓨터내에 저장된 사진 파일 삽입하기! 컴퓨터내에 저장된 사진 파일경로는 위와 같다. 동일한 .. 2021. 7. 22.

링크 !! very important! | HTML & CSS 시리즈 008 링크! 정말 웹페이지 만들때 중요하다! 링크 어떻게 생성해주는데?? 위 사진처럼 아래와 같이 입력 해줄수 있다. go there ~ 주소입력 란에는 클릭시 들어가고 싶은 링크를 걸어두면 된다. 뭐 예를 들어 구글로 가고 싶다! 그렇다면 google 이와 같이 작성할 수 있다. 그런데 이렇게 작성하게 된다면 새창이 아닌 사용중인 창에서 구글로 바뀌게 되는데 이걸 불편해 하는 사용자들이 꽤 있다. (쓴이도 불편함) 그렇다면 새로운 링크클릭시 새로운 창으로 연결하는 방법이 뭔데? google target="_blank" 이걸 연결하고 싶은 주소 뒤에 추가 해주면된다. 응용해보자! 다른 페이지로 넘어갔다가 돌아왔다가 하는 방법!!! 뭐야뭐야 그러면 응용해서 이처럼 메인페이지에서 다른 페이지로 넘어갔다가 다시 돌.. 2021. 7. 22.

옵셔널 태그 이건 또 뭐야? | HTML & CSS 시리즈 007 옵셔널 태그(Optional Tags) .. 이건 또 뭐야? 옵셔널 태그.. 에는 태그 들을 말한다. 이런 태그들은 직접 해보면 알겠지만, 쓰지 않아도 별 문제 없이 작동된다. 그러면 옵셔널 태그 꼭 써야 합니까? Optional Tags! 단어 그대로 선택적 태그 라는 뜻을 지닌다. 선택적?? 그렇다면 해도 되고 안해도 되는 건가? => 결론부터 말하자면 그렇습니다. 정말 개인 자유인것 같다. 음..들여쓰기 ,주석 를 꼭 써야 되냐는 묻는 것과 거의..비슷하다고 개인적으로 본다. 그렇지만 나는 정리 목적으로 위에 말했던 태그들을 사용하는 하는게 좋다고 본다. 를 통해서 코드의 구조가 한 눈에 들어오기 때문이다. +그치만 구글 가이드 (https://google.github.io/styleguide/ht.. 2021. 7. 22.

들여쓰기? 그게 뭔데? | HTML&CSS 시리즈 006 들여쓰기 ? 그게 뭔데?? 들여쓰기 하는 방법은 tab 을 누르거나 한 번에 드래그해서 들여쓰는 방법으로는 드래그한 후 ctrl + }를 누르면 된다. 위 사진을 보면 들여쓰기가 뭔지 한번만에 이해 할 수 있을것 같다. 들여쓰기 그러면 왜 하는데?? 그딴거.. 음 찾아본 결과 - 부모요소의 태그의 위치나 파일의 경로를 알아보기 쉽게 표시하려고 - 웹페이지를 코딩할때 소스코드가 복잡하게 있으면 찾기어려워서 => 그러니까 깔끔하게! 다른 개발자들이 봤을때 알아 보기 쉽게! 하려고 이다. 솔직히 자신만의 코드를 개발하려고 들여쓰기 안해도 될까? 생각도 해봤다. 그런데 협역필요 없는 개발을 할때에도 코드가 길어진다면 본인 또한 찾는데 시간이 걸릴꺼 같다는 생각이 들었다. 결론은 무조건 들여쓰기 습관을 들이자! .. 2021. 7. 22.

이전 1 2 3 4 5 6 7 다음

728x90

티스토리툴바