wellkiim

안녕하세요! 웰킴입니다.어제는 많은 태그들을 활용한 기초웹페이지 영역을 나누는 방법에 대해 알아보았죠!그것과 마찬가지, 연장선으로 잠깐의 테스트형식의 문제를 풀어볼까합니다.!웹페이지의 영역wrap , header , 그리고 container , footer등 각각의 영역에 대한 이해는 충분히 하셨다고 보고,잠시 복습해본 다음 !다음 단계로 넘어가보도록 할게요!해상도 PC에서 가장 기본적인 해상도 ( 반응형 고려 ) : 1025px , 1280px 이 있습니다. PC에서만 사용하는 해상도 ( 관공서 , 예전 PC ) : 940px ( 리뉴얼 하기 전의 네이버와 다음의 너비사이즈 ), 960px, 980px 이 있습니다. 글자정렬 text-align : left , right , center + left :..

안녕하세요. 웰킴입니다. 어제는 인라인요소와 블럭요소에 대한 이해에 목적을 둔 시간을 가졌는데요.오늘은,많은 태그들을 활용한 기초 웹페이지 영역을 나누는 방법에 대해 알아보도록 하겠습니다.! HTML에 대한 글을 작성했을 때에 wrap 영역과 header , 그리고 container , footer 등 각각 영역에 대한 설명을 드렸던 것들을 기억하시나요? 클릭 ▶ HTML 설명 바로가기 그 각각의 영역이 어떠한 것들을 담고있는지에 대한 설명과, pc버전들이 가지는 각각의 픽셀 크기 등을 알아보도록 하겠습니다. 에디터 편집기를 사용하여 코드를 작성해보도록 하겠습니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434..

안녕하세요. 웰킴입니다. 어제부터 CSS에 대하여 알아보는 시간을 가졌는데요.css에 대한 높이와 너비설정을 이용하여 박스형태의 모양을 만들어보도록 하겠습니다. 먼저,weight : 너비값을 말합니다. px단위로 설정할 수 있습니다.height : 높이 값을 말합니다. 마찬가지로 px단위로 설정할 수 있습니다.전 시간에 inline 요소와 block요소에 대해 알아보았는데요.대표적으로 span 태그가 인라인요소였죠.인라인요소는 기본적으로 너비와 높이값을 가지지 않습니다. 그렇기 때문에 너비와 높이값을 줘도 적용되지 않습니다.그렇다면, 인라인요소에 너비와 높이값을 주기위해서는 어떻게 해야할까요.? 인라인요소를 블럭요소로 바꾸어주어야합니다. 에디터에 코드를 작성하여 알아보도록 하겠습니다. 1234567891..

안녕하세요.! 오늘은 추천 에디터인 브라켓 ( brackets )의 유용한 플러그인을 추천해드리려고 합니다.! 물론, 각자의 성향에 따라 유용할 수도, 불편할 수도 있으니 이 점 잘 참고하시고 각자 편하신 것을 사용하시면 될 것 같습니다.! HTML 편집기 무료 소프트웨어 Adobe Brackets ▼ 아래 텍스트를 클릭하시면 다운로드 및 설치 방법에 대한 페이지로 이동하게 됩니다. " Adobe Brackets 설치방법 " 일단, 다운로드 받은 Brackets을 실행하게 되면 , 아래 이미지와 같은 페이지가 나타나게 됩니다. 그 후, 해당 이미지 버튼을 클릭해주시면 플러그인 다운로드 창이 나타나게 됩니다. ▼ 플러그인 다운로드 창 제가 사용하는 플러그인을 소개해드리도록 하겠습니다. ! 1. Popup-..

오늘은 추천 에디터인 브라켓 ( brackets )을 소개해드리려고 합니다.! Html 편집기 무료 소프트웨어 Adobe Brackets HTML / CSS / jQuery / javascript / php / JAVA 등을 알아가기 위해 필요한 작성 에디터가 필요하겠죠? 저도 맨 처음에는 Editplus 라는 에디터를 사용하였습니다. 하지만, 조금 더 편하고 예쁜 템플릿을 가진 에디터를 찾다가 Brackets을 처음 접하게 되었는데요. 다양한 편집기가 있지만, 오늘은 Brakcets을 소개해드리려고 합니다. 그건 바로 " Adobe Brackets " ▼ 다운로드 링크 http://brackets.io/index.html Adobe Brackets 다운로드 사이트 링크된 사이트로 이동하면 위같은 화면이..

안녕하세요. 웰킴입니다. 어제부터 CSS에 대하여 알아보는 시간을 가졌는데요. 오늘은 한층 난이도를 높여서 css의 기능 중에 많이 쓰는 명령어들을 알아볼까 합니다.헷갈릴 수 있으니 잘 따라와주시길 바래요 ~ 오늘 배울 명령어들을 먼저 알아보도록 하겠습니다. 먼저, font-weight : 폰트의 굵기를 말합니다. 기본적인 크기는 400 이라고 생각하면 됩니다. 100 단위로 크기를 높이는 것이 일반적입니다. color : 폰트의 색상을 말합니다. 16진법이 일반적입니다. 경우에 따라 #red , #yellow 등 고정적인 값을 영어로 입력해도 무방합니다. text-align : 폰트의 정렬 형태를 말합니다. left , center , right 가 있습니다. text-transform : 영어로 된 ..

안녕하세요. ! css로 다시 찾아뵙는 웰킴입니다. 오늘은 css에 대하여 처음 말씀을 나누어볼까 합니다.! 먼저, 두산백과에서 따온 css의 정의를 알아보도록 할게요. 요약 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. html이 마크업으로서, 전체적인 뼈대를 만들어주었다면,css는 이제, 꾸며주는 역할을 한다는 사실 알고 계셨나요.? 간단하게는 글자의 색깔을 바꾸거나,배경에 색상을 주거나. 등등 여러가지 방법으로 응용이 가능하답니다.! 그렇다면 오늘은 먼저, css의 기본을 배워볼까요 .! 언제나 그렇듯이 마찬가지로 에디터에 코드를 작성해보도록 하겠습니다.! 아시죠?? (각 태그에 적혀있는 텍스트 들은..

이번 시간에는 앞서 배운 태그들을 가지고 그 해당 태그에 id값을 입력.각 태그들이 어떤 영역을 가지는지 앞선 web_basic파트에 이어 조금은 더 심화된 구성을 해보려고 합니다. 준비되셨나요! 어렵지는 않으나, 이번 시간에 배우는 각각의 markup을 가지고 따라해보시되,여러분들이 각 태그안의 텍스트를 바꾼다던지. 각각 태그에 원하는 이미지를 넣어보는 방식으로 간단한 페이지를 꾸며도 재밌을 것 같다는 생각을 감히 해봅니다.! 자 그럼 에디터를 켜고 코드를 작성해보도록 하겠습니다. 해당하는 영역으로 이동( 구간 건너뛰기 ): wrap영역에 속하지 않고 독립적인 영역으로 사용가능wrap, wrapper, 기업명wrap,기업명_wrap : 전체를 담아주는 영역!로고, 상징적인 요소들: 상황에 따라서는 he..

안녕하세요. div와 p태그 span 등등 기본적인 block태그와inline태그들을 알아보았습니다. 웹페이지를 만들기 위해선 예쁜이미지가 필수죠? 그래서 오늘은 img 태그에 대하여 알아보도록 하겠습니다. 기본적인 형태는 이렇습니다. src는 경로를 의미합니다. 아래에서 다시한번 제대로 보시겠지만, src 는 source라는 의미를 가지고 있습니다.또한 알트는 대체텍스트로서 사용되기 때문에, 웹접근성, 웹표준에 있어서 중요한 역할을 차지합니다.그렇게 때문에 꼭 사용할 것을 권장드립니다. ( 웹표준, 웹접근성에 대한 내용은 포털사이트 검색을 추천드립니다. 튼튼한 페이지를 위한 가장 기본적인 것들입니다. 지키지 않는 사람들이 많습니다.저러한 대체텍스트를 사용함으로써 여러분들이 만드는 페이지는 정말 큰 강점..

이번 시간에는 webpage basic 즉, 웹페이지를 만들때 쓰는 태그들에 대하여 기본 단락들을 구성하는 방법에 대하여 간단히알아보도록 하겠습니다. 전체 페이지를 담는 큰 틀로써, wrap이라는 영역이 있고, 그 아래로 로고나, 네비게이션바 (nav) , (gnb) 그리고 로그인, 회원가입 등을 담고있는 영역인 header 영역 컨텐츠 및 광고요소가 들어가는 container 영역 마지막으로 이용약관, 개인정보 방침, 법률정보 등을 담아주는 footer 영역이 있다. 마찬가지로, 에디터에 코드를 치고, 각 태그들에 대한 출력값을 보여드리도록 하겠습니다. 로고: 상징적인 요소(홈페이지 전체 이미지)header영역에 작성되어야 하는 내용네비게이션바, 로고, 로그인, 회원가입컨텐츠및 광고요소가 들어가는 영역..

자 오늘은 어제 배운 태그 중에서 간단하게 inline 속성 태그와block 속성의 태그들을 알아보도록 하겠습니다. 같은 방식으로 에디터에 코드를 작성한 후, 그에 대한 출력값을 보여드리는 형태로 진행을 하도록 하겠습니다.! 에디터에 작성한 코드/ 즉, 각 태그에 작성한 글들이 그 해당 태그들에 대한 설명인 것을 알고 봐주시면 되겠습니다.! 블록요소 : 박스요소블록요소의 내용: 너비와 높이값을 가지는 형태의 요소를 블록요소라 말한다.블록요소는 기본적으로 끝에서 끝까지 영역을 차지함블록요소중에서 p태그는 가장 작은 단위의 박스요소 인라인요소인라인요소의 내용: 글씨요소로 사용, 가나다라마바사....옆으로 나열되는 특징을가지고 있음 + 인라인 태그들 중에는 열고 닫고가 없어도 표현이 가능한 태그들이 많다! b..

자 이번에는 html에서 사용하는 태그들 중 몇가지를 먼저 알아보도록 하겠습니다. 일단 headline 태그로 h1 ~ h6 태그가 있습니다. 각각 1부터 6까지 점점 작아지는 형태를 띄우는 태그입니다.앞의 숫자가 작아질수록 대제목, 소제목으로 나눌 수 있습니다. 보통 h1태그는 로고를 담는 태그나 해당 페이지의 이름을 쓸때 한번 사용하고,그 외에는 사용하지 않는 것이 일반적입니다. 그리고 가장 많이 쓰는 형태인, div와 p태그 인라인과 블럭 형태의 태그들이 존재합니다.그에 대해서는 추후에 설명드릴 예정입니다. div와 p태그는 단락을 나누는 태그인 태그를 사용하지 않아도 알아서 단락이 나누어지게 됩니다. 에디터에 코드를 작성해 보도록 하겠습니다. tag의 종류와 의미headline태그는 영역의 제목 ..