HTML 문서의 구조 안녕하세요. 오늘은 html문서의 구조를 올려보려고 합니다. html 파일 만들기 html 구조 완성하기 1. html 파일 만들기 html 파일을 만들어주세요. 내용은 아직 없어도 됩니다. 2. HTML 구조 완성하기. 하나하나 설명하면서 추가해보겠습니다. 순서는 상관 없습니다. 2-1. HTML 문서인지 알려주기. 이 웹페이지가 html로 만들어졌다는 의미로 문서의 시작에 추가해줍니다. 모든 걸 감싸줄 태그도 써주세요. 2-2. 본문 나누기 본문 태그를 사용하고 본문을 설명해주는 곳은 1.아톰 에디터 설치하기 2.웹사이트 파이콘 적용하기 3.html/css 테두리 색깔 변경 4.간단한 웹사이트 만들기 5.html태그 1.아톰 에디터 설치하기 웹사이트 파이콘 적용하기 html/cs..
HTML 태그 안녕하세요. 오늘은 html에 list를 추가해보려고 합니다. html 파일 만들기 태그의 부모(parent) 자식(child) 관계 리스트(list) 태그 1. html 파일 만들기 지금은 그냥 이렇게 확장자가 html이 되게 만들어주면 됩니다. 간단하죠? 2. 태그의 부모(parent) 자식(child)관계 html에서 둘러싼 태그와 둘러싸인 태그를 부모 자식 관계라고 합니다. (ex)
HTML 사진과 속성 안녕하세요. 오늘은 저번에 했던 내용에서 사진을 추가해보려고 합니다. html 파일 만들기 html에서 사진을 넣기 위한 태그 html 문법 1. html 파일 만들기 귀찮으니 이건 저번 글에서 사용했던 1.html 파일을 이어서 하겠습니다. 파일 내용은 아래와 같습니다. 지금부터 1.html과 같은 폴더에 있는 사진을 넣어보겠습니다. 2. html에서 사진을 넣기 위한 태그 html에서 사진을 넣기 위한 태그는 라는 태그입니다. 그렇다고 아래 사진처럼 태그만 입력하면 안 됩니다. 태그만 입력하면 아래 사진처럼 아무런 사진도 나오지 않습니다. 왜 그럴까요? 바로 출력하기 위한 사진의 정보가 부족하기 때문입니다. 즉 해당 태그에는 무슨 사진을 불러올지 알려주는 내용이 없기 때문이죠. ..
html태그 안녕하세요. 오늘은 html을 공부하면서 알게 된 내용을 적어보려고 합니다. html에서 줄 바꿈을 위한 태그입니다. 닫지 않는 태그 단락(paragraph)을 표현하는 태그 1. 닫지 않는 태그(줄 바꿈) 보통 대부분의 태그는 이런식으로 열고 이렇게 닫습니다. 하지만 이번 태그는 닫지 않아도 되는 태그중에 하나입니다. 역할은 줄 바꿈입니다. 줄 바꿈을 해줄 부분에 태그를 넣어주시면 됩니다. (ex) 내용 내용--> 내용/줄바꿈/내용(아래 사진 참고) 글로 설명하려니 힘드네요. 위의 html을 크롬으로 들어가 보겠습니다. 아래 사진처럼 줄바꿈이 됩니다. 2. 단락(paragraph)을 표현하는 태그 단락을 표현하기 위해 사용할 태그는 태그입니다. 이 태그는 위의 태그와는 달리 열고 닫아줘야 ..
간단한 웹사이트 만들기 안녕하세요. 오늘은 html을 공부해보려고 합니다. 매우 기초적인 부분이라 간단하고 별거 없습니다. html문서 만들어보기 글에 강조 태그 적용해보기(, ) 1. 아무거나 입력했을 때 먼저 .html파일을 하나 만들고 아무 글이나 써보겠습니다. 아톰 에디터를 이용해서 1.html이라는 파일에 아무 글이나 입력했습니다. (크흠흠... 아무 글입니다. 게으른 주인장 블로그 구독!!!) 그럼 이 내용을 크롬으로 열어보겠습니다.(다른 브라우저로 열어도 됩니다.) 크롬으로 열어보니 주소창에는 1.html의 경로가 보입니다. 크롬의 화면에는 제가 1.html에 작성한 내용이 그대로 보이네요. 2. 강조(굵은 글씨) 그럼 이번에는 위의 html에 작성한 글을 강조(굵은 글씨) 해보겠습니다. 강..
form 테두리 색깔변경 저장용으로 쓰는겁니다. 처음 form은 이렇게 아무색깔도 없습니다. 이곳에 색을 추가합니다. (css사용) 유효한 입력일때가 valid이고 무효한 입력일때가 invalid입니다. 유효한 입력일때는 forestgreen색을 적용하고 무효한 입력일때는 firebrick색을 적용하는 것입니다. 유효한 입력과 무효한입력은 pattern과 required을 적용해서 구분합니다. 이렇게 해서 조금더 꾸미고 코드도 조금 더 넣어서 이렇게 만들었습니다. 먼저 처음에는 아이디와 비밀번호가 빨간색입니다. 여기서 6글자이상 입력하면 색이 바뀌게됩니다. before after 이렇게요. [잡다한것] - 웹사이트 만들기 html [잡다한것] - 블로그 html적용 [IT/윈도우] - 윈도우10 작업표시..
웹사이트 파비콘 안녕하세요. 오늘은 웹사이트에 파비콘 적용하는 방법을 알려드리려고 합니다. 방법은 정말 간단합니다. 1. 파비콘으로 사용할 이미지를 구합니다. 2. 이미지를 아이콘파일로 바꿔줍니다. 3. html에 코드를 추가합니다. 이렇게 하시면 됩니다. 이미지를 아이콘으로 바꾸는 방법. 이것은 아래에 제가 써놓은 글을 참고하시면 됩니다. [IT/유용한정보] - 사진파일을 아이콘파일로 바꾸기 이번에 제가 예시로 사용할 아이콘의 모습입니다. (그냥 예시로 쓰려고 컴퓨터에 c드라이브에서 굴러다니는 아이콘 아무거나 찾아서 가져왔습니다.) 아이콘을 파비콘으로 적용해보자. 이 아이콘을 적용하는 코드는 한줄이면 됩니다. 바로 이것입니다.이 코드를 태그 안에 넣어주시면 됩니다.(title아래에 넣으니까 안나오네요...
안녕하세요. 오늘은 아톰이라는 에디터를 설치하는 방법을 알려드리려고 합니다. ATOM(아톰)다운 먼저 ATOM설치를 하기위해 설치파일을 받아야합니다. 설치파일은 아래 사이트에서 받으실 수 있습니다.(140mb) https://atom.io/ settings를 들어갑니다. settings에서 install로 들어가주세요. 이곳에서 packages(확장기능)을 받을 수 있습니다. ex. emmet이 필요하다면? emmet을 검색해서 install을 누르시면 됩니다. (저는 설치해놓아서 아래와같이 나옵니다.) [잡다한것] - 웹사이트 만들기 html [IT/C] - notepad++다운받기 [IT/유용한정보] - 한컴타자연습 작동이 중지되었습니다 해결방법
