얼마전 일본어를 공부하면서 히라가나,가타카나를 접하게되었습니다 한국어의 가나다라마바사 같은 기본적인 히라가나,가타카나를 알아야 일본어를 할수있는데 공부도할겸 이 히라가나와 가타카나를 랜덤으로 보여주면서 외울수있는 사이트를 만들면 일본어공부도 웹사이트 제작 공부에도 도움이될꺼같아서 시작하게되었습니다 study japan japan-study.hopto.org 현재 배포중인 사이트 주소입니다 현재는 히라가나만 테스트로 만들었고 화면 중앙 히라가나 생성버튼을 클릭할시 랜덤으로 히라가나와 발음을 출력해줍니다 아직까지는 아주 많이~ 부족하고 단조로워서 화면중앙 디자인을 더하고 가타카나는 물론이며 히라가나,가타카나를 구분해서 따로 학습할수 있도록 확장시키려고 합니다 사이트 제작 참고자료 화면중앙 배치 https:/..
오늘은 PHP를 사용하여 사이트에 방문한 사람의 IP주소 및 접속 정보와 사용자의 위치를 확인하는 방법에 대해서 알아보겠습니다 사용자의 아이피와 아이피 위치정보를 알아내는 방법 간단한 방법으로는 사이트 접속시 User-Agent가 담고 있는 세부 정보를 통해 조회하는 방법이 있습니다 PHP에서 이를 간단하게 사용할수 있도록 제공해주는 Ip Geolocation Api를 사용해보려고 합니다 User-Agent가 뭔데? 우리가 사용하는 인터넷에는 사용자 에이전트(User Agent)가 존재하는데 이 기능 속에는 사용 중인 OS 정보나 해상도 웹브라우저 버전 종류 등등 많은 정보를 담고 있습니다 구글에 user agent check라고 입력 후에 검색하면 현재 저의 에이전트가 노출되는 걸 확인할 수 있습니다 ..
어제 업로드한 HTML강좌 #06에서는 브라우저 사이즈에 맞게 반응하는 텍스트 예제를 보여드렸는데요 newstroyblog.tistory.com/46?category=874865 HTML 강좌#06 브라우저 사이즈에 맞게 글자크기가 변하는 반응형 텍스트 만들기 최근에는 대부분의 사이트가 반응형 페이지로 이루어지고 있는 추세입니다 반응형 웹이라고 하면 제작한 웹사이트를 PC, 스마트폰, 태블릿 등 접속하는 기기의 종류에 따라서 화면의 사이즈가 � newstroyblog.tistory.com 게시물에 나와있는 사용방법을 보시면 두 가지의 방법이 있습니다 첫 번째로 html내에서 p태그 내에 스타일을 주어 폰트 사이즈를 지정해주었지요 그리고 두 번째 div요소를 생성 후에 css에서 스타일을 적용시켜주었습니다..
최근에는 대부분의 사이트가 반응형 페이지로 이루어지고 있는 추세입니다 반응형 웹이라고 하면 제작한 웹사이트를 PC, 스마트폰, 태블릿 등 접속하는 기기의 종류에 따라서 화면의 사이즈가 자동으로 변하도록 제작된 웹 페이지를 말합니다 몇 년 전까지만 해도 부분의 웹페이지는 pc에서만 접속하거나 작동하였지만 요즘에는 스마트폰을 이용하여 모바일에서도 접속하는 경우가 많습니다 하지만 pc용으로 설계된 웹페이지의 경우 모바일 화면에서 보면 화면의 구조가 이상하거나 또 화면을 확대해서 이곳저곳 움직여야 하고 이용자에게 있어선 엄청 불편하겠죠? 오늘은 반응형 웹페이지를 제작 시에 텍스트 부분 pc화면으로 볼 때 텍스트를 넣은 후에 글자크기가 고정이 아니라 브라우저 크기에 따라서 줄어들게 한번 제작해볼 겁니다 아래의 적..
반갑습니다~글을 작성하다보니 어느덧 5강까지 왔네요이전 강좌들은 HTML을 배우는데 많은 도움이 되셨나요??4강 게시물을 아직 읽지 못하고 오신분들은 아래 링크를 클릭하여 게시물을 읽은후 5강을 들으면공부에 도움이 될겁니다! 4강 링크를 클릭하세요! 이번 5강에서는 HTML에서 주석을 다는 방법에대해서 알려드리려고 합니다 주석이란?소스코드의 양이 많아진다면 매번 어느부분인지 확인하기가 어렵습니다 그렇기 때문에 HTML프로그래밍을 하는 과정에서 각 행별 어떤 소스 코드인지 이해하기 쉽게 정리하는데 사용이 됩니다 주석은 HTML뿐만아니라 css에도 있으며 C언어나 vb.net ,c#에도 존재합니다 하지만 프로그래밍 언어에따라서 약간씩 주석을 넣는 방법도 다릅니다 그럼 HTML에서는 주석을 어떻게 넣을까요??..
안녕하세요 지난 포스팅에서는 HTML에서 사용하는 태그에대해서 조금 집중적으로 알아봤습니다! 이전 강좌를 보지 못하신분들은 아래 링크를 클릭하여 본후 현재 강좌를보시면 도움이 됩니다 https://newstroyblog.tistory.com/4 이번 강좌에서는 HTML에서 자주 사용되는 텍스트 서식태그에 관해서 알려드리려고 합니다 HTML에는 많은 텍스트 서식태그들이 있지만 솔직히 말해서 다 알고있진 못합니다 그래서 이번 게시물에서는 제 경험을 바탕으로 나름 이건 알고있어야 한다 이건 자주쓰인다 싶은것들을 모아 알려드립니다 제가 이렇게 쓴다고해서 무조건 이게 정답은 아니니 공부하면서 정보가 더 필요하면 원하는 내용을 검색하는 습관을 들이면 좋을거 같습니다 이미지가 작을경우 이미지를 클릭하여 보시면 큰 이..
HTML코드를 작성할때 body태그는 브라우저상에서 내용이 표시되는 곳이라고 알고있는데 그렇다면 그위에 작성하는 head태그는 뭘까요?? 우선 아래 코드를 확인해주세요 123456789101112131415 My site page My Title cs 태그안에서 태그를 사용한후 그안에 이런 내용이 있습니다 이 내용에 대해서 설명해드리자면 html파일의 인코딩을 알려주는 태그입니다 인코딩을 알려주지 않을경우 웹브라우저 설정에따라서 자동으로 인코딩을 처리해주는데 처리가 정확한경우도 있지만 그렇지 않은경우도 있습니다 그렇기때문에 한글이 깨지지 않게하기 위해서 위 태그는 꼭 적어주는게 좋습니다 그 이후에 작성된 My site page 태그는 웹페이지 자체 제목으로 표시가됩니다 뭔말인지 이해가 안되시나요?? 사진..
안녕하세요 이전 강좌에서는 기본적인 html코드를 보여드리고 그 코드에대한 간단한 설명과 비주얼스튜디오코드를 사용하여 코드를 작성후 웹페이지에서 어떻게 보이나 열어봤는데요 오늘은 각 태그들을 사용하여 웹페이지에서는 어떻게 보이나 하나하나 확인해봅시다! 이전 강좌를 보지 못하신분들은 아래 링크를 클릭하여 확인해주세요 https://newstroyblog.tistory.com/3 사진이 잘 안보이거나 사진의 크기가 작으신분은 사진을 클릭하여 확대하여 봐주세요 HTML 코드를 작성할때 상단에 을 선언하며 시작해야합니다 1cs HTML문서의 시작과 끝이 다음으로는 HTML문서에서 시작은 끝은 으로 표현합니다 그래서 html의 시작과 끝을 추가하게되면 이렇게 됩니다 12345678 cs 브라우저에서 내용이 표시되..
저는 전문강사나 실무경험자가 아니기에 이론에 관해선 나무위키나 구글에 검색하시는게 좋습니다 제가 HTML을 배우면서쉽게 이해하고 불필요한 부분은 최소화하여 설명해드리겠습니다 강좌를 진행하기 앞서 이전 1강에서웹사이트를 구성하고있는 언어의 종류에 대해서 간단히 소개하고 에디터에대해서 소개해드렸습니다이전 강좌를 보지 못한분은 아래링크를 클릭하여 확인해주세요 https://newstroyblog.tistory.com/2?category=874865 우선 HTML (Hypertext Markup Language)은 웹페이지 및 웹 응용프로그램을 만들기위한 언어입니다 CSS (Cascading Style Sheets) 및 자바스크립트 (JavaScript)를 사용하여 기본적인 웹 페이지를 구성합니다 지난 게시물에..
안녕하세요 이번 게시물에서는 웹 사이트는 개발시에 어떤 언어를 사용하고 어떻게 만드나에 대해서 알려드리려고 합니다 웹사이트 제작시에 기본적으로 다음과 같은 개발 언어를 사용해 만들수 있습니다 이번 게시물에서는 웹사이트제작에 사용되는 언어에는 어떤것들이 있고 각 언어들의 특징이 무엇인지만가볍게 읽어보시고 넘어가시는걸 추천드립니다 HTML 우선 html은 로 시작하며 로 끝이나며 보통 홈페이지에서 마우스 우클릭후 소스보기를 눌렀을때 나오는 글자들을 말합니다쉽게 얘기하여 웹사이트의 뼈대 라고 생각하시면 됩니다 HTML의 특징! - HTML태그는 대문자와 소문자를 구별하지 않습니다 - - HTML문자열 사이에 있는 하나 이상의 공백은 무시됩니다 -- 각 태그는 안에 작성하며 여는 태그와 닫는 태그가 있다 - C..
