지나가던 Blog

(할 말이 없다) (그냥 간단하게 디자인만 했는ㄷ) 그냥 바로 소스 코드 공개 index.html Your IP Address is This site does not collect any personal information about you. style.css @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap'); #title { width: 99%; height: 99%; margin: 1%; background-color: black; } ..

오늘부터는 접속자의 아이피를 알려주는 사이트를 만들어 볼 것이다. 대충 소스 코드 공개 Your IP Address is 꽤나 간단한 코드이다. Your IP Address is 아래에 접속자의 아이피가 출력되는 식이다. 실행시켜보자. 아이피 한번 필사적으로 가렸ㄴ...(읍읍ㅂ) 음 암튼 Your IP Address 뒤에 내 아이피 주소가 나온다. 뭐 이제 IP 나오게 했으니 디자인만 하면 된다: 반은 했다!

웹사이트를 만들 때에, 다른 페이지로 링킹하는 작업도 분명히 필요하다. 다른 페이지로 링킹하기 위해서는 간단히 태그를 사용해 주면 된다. (a = anchor element) 바로 코드 작성 후 실습하여 보자. Search Engines Google Baidu Yahoo DuckDuckGo 실행하자! 저 파랑색 글자를 클릭하면 바로 구글, 바이두, 야후, 덕덕고 페이지로 이동하는 것이다. 그런데 저게 내 탭에서 바로 변하니 불편하지 않을 수가 없다. 다른 탭에서 열리게 할 수는 없을까? _blank를 사용하여 간단히 바꾸어 보자. Search Engines Google Baidu Yahoo DuckDuckGo 바로 실행! 이제 다른 탭에서 페이지가 열리니 편안하다. 이렇게 파일 간 이동(index.htm..

웹에 이미지를 추가하려면 어떻게 해야 할까? 간단하다. 태그를 사용해주면 된다. (img = image) 바로 코드를 작성하자. GOOGLE 실행시켜 보자. 어떻게 이미지가 들어가기는 했는데, 크기가 너무 크다. width와 height를 사용해 크기를 맞춰 보자. 코드 수정! GOOGLE 실행시켜 보자. 크기가 작아졌다. 화면 비율도 맞추면 완벽할 것이다. 화면 비율은 여러분이 알아서 원하는 사진으로 맞춰 보시길!

이번에는 글자들을 리스트로 정리하여 보도록 하겠다. 이번에는 태그가 세개인데, 바로 태그와 태그, 그리고 태그이다. 은 나중에 살펴보기로 하고 일단은 과 를 다뤄 보겠다. (ul = unordered list, li = list) 뜻에서 알 수 있듯이, ul은 unordered list, 즉 정렬되지 않은 리스트이고, li만 쓰이는 것처럼 보인다. 하지만 그게 아니라 두 개 다 쓰여야만 한다. 태그로 리스트가 들어갈 자리를 만들어 주고 태그로 리스트의 내용을 추가한다고 생각하면 이해가 쉬울 것이다. 바로 코드 작성 후 실습해 보자. Countries in East Asia Japan China Korea(South) Korea(North) Taiwan 상당히 간단한 코드가 등장했다. 바로 실행시켜 보자...

오늘은 Html 글자에 기울임 효과를 주어 보도록 하겠다. 간단히 을 사용하면 된다. (em = emphasizes text) 바로 코드 작성 후에 실습해 보자. Emphasizes Texts em means Emphasizes Text! 간단한 코드이다. 바로 실행시켜 보자. 으로 Emphasizes Texts라는 제목을 구현하였고, 그 밑에 , 설명을 으로 기울였다.

문단이란 특정한 요지나 아이디어를 다루는 글쓰기에서, 글을 내용상 끊어서 구분한 하나하나의 토막을 가리키며, 단락이라고도 한다. 쉽게 말해서, 설명 비슷한 것이다. 우리는 Html에서 문단을 구현할 때 태그를 쓴다. (p = paragraph) 바로 실습해 보자! My blog Welcome to my blog! 굉장히 간단한 코드이다. My blog라는 제목에다가 "Welcome to my blog!" 라는 설명을 붙인 것이다. 실행해 보자. 으로 My blog라는 제목이 구현되었고, 그 아래에 paragraph, 즉 설명이 붙은 것을 볼 수 있다.

별건 아니고(정말 별거 아님) 오늘은 간단한 애니메이션 효과를 추가해 줬다. 대충 클래스를 만들어서 할까 했는데 그러면 클래스 속성 주는 작업이 너무 노가다(???)여가지고 그냥 p에다가 슬라이드인 효과를 줬다. 대충 소스 코드 공개 index.html 由崎 司 _ fansite [BGM] Yunomi - ⽉と星空 Menu Fun Facts about Tsukasa Language English Developers Developed by 권용현 Designed by 권용현 Music by Yunomi Ads by Tenping Special Thanks to 鬼頭 明里 Special Thanks to 畑 健二郎 Special Thanks to amous Name: 由崎 司(Yuzaki Tsukasa) S..

사이트가 한 페이지밖에 없는 초라한 모습이어서 페이지를 하나 더 추가했다. 앞으로 하나하나씩 추가해 나갈 예정! 대충 소스 코드 공개 index.html 由崎 司 _ fansite [BGM] Yunomi - ⽉と星空 Menu Fun Facts about Tsukasa Language English Developers Developed by 권용현 Designed by 권용현 Music by Yunomi Ads by Tenping Special Thanks to 鬼頭 明里 Special Thanks to 畑 健二郎 Special Thanks to amous Name: 由崎 司(Yuzaki Tsukasa) Spouse: 由崎 星空(Yuzaki Nasa) Age: 16 Birthday: April 3rd Co..

그때 1일차에서 사이트를 만들고(coderyh.tistory.com/9), 폰으로 사이트에 들어가 보았는데, 화면 비율 때문인지 모든 것이 깨져 보였다. 불-편해진 나는 일어나자마자 반응형 사이트를 만들었다. 대충 소스 코드 공개 index.html 由崎 司 _ fansite [BGM] Yunomi - ⽉と星空 Language English Developers Developed by 권용현 Designed by 권용현 Music by Yunomi Special Thanks to 鬼頭 明里 Special Thanks to 畑 健二郎 Special Thanks to amous Name: 由崎 司(Yuzaki Tsukasa) Spouse: 由崎 星空(Yuzaki Nasa) Age: 16 Birthday: Ap..