Recoding & Share Devlog

HTML 에서의 마지막 포스팅이면서 아주 중요한 블록레벨과 인라인레벨입니다. 사진과 함께 코드를 첨부하여 코드에 주석으로 충분한 설명을 기재하였습니다. 인라인 레벨과 블록레벨, 대체되는 요소, 대체되지 않는 요소에 대하여 작성을하고 확인을 해 보았습니다. 바로 코드를 보겠습니다. 요소의 분류 div,span { background: yellow; color:red; width: 200px; height: 200px; /* font-size: 300px; */ } 대체되지 않는 요소 ㄱㄴㄷㄹㅁㅂㅅㅇ 대체되는 요소 블록레벨 h요소는 블록레벨 p요소도 블록레벨 ul역시 블록레벨 ul역시 블록레벨 2 ol 블록레벨 블록 블록레벨테스트 Park 인라인레벨 span 인라인 요소 네이버 다음 label은 인라인요소 ..

이번 포스팅에서는 여러 입력 요소에 대한 설명입니다. 여러 입력요소로 회원가입 폼을 한번 만들어 보겠습니다. 이중에서 포스팅하지 않은 요소는 날짜를 입력 할 수 있는 select 요소, radio type, check box , file 정도입니다. 바로 코드를 보겠습니다. 여러가지 입력요소 여러가지 입력요소들 회원가입 폼 아이디 비밀번호 성별 선택 남 여 취미 선택 독서 음악감상 운동 태어난 해 선택 2018년 2017년 2016년 2015년 2014년 2013년 프로필 입력 프로필 사진 등록 회원가입 주석에 충분한 설명이 기재되어있습니다.

지금까지 배워본 예제로 한번 복습을 해보는 포스팅을 해보겠습니다. 이런 화면을 구성하는 예제인데요, 여기서 아직 포스팅하지 않은 한가지 요소가 있습니다. 바로 소스코드를 보면서 확인을 해보겠습니다. 1848년 혁명 속의 작곡가들 #voic { color: #123456; } 서양 음악사의 뒤안길 1848년 혁명 속의 작곡가들 스메타나, 카렐 다리에 바리케이드를 쌓다 오늘도 세계인의 발길이 그치지 않는 체코 수도 프라하의 카렐 다리. 이 다리를 동쪽으로 건너와 오른쪽으로 돌면 블타바강 강변에 1936년 세워진 스메타나 박물관을 바로 찾을 수 있다. ‘체코 국민음악의 아버지’로 불리는 베드르지흐 스메타나(Bedřich Smetana, 1824~1884)를 기리는 장소다. 건물 바로 앞에 스메타나의 동상이 건..

이번 포스팅에서는 중요한 개념인 폼의 기능에 대해서 알아보겠습니다. 먼저 GET 방식과 POST 방식이 있는데요, form 요소를 쓸때는 action과 method를 기재하는것은 form에 관함 포스팅에서 알아보았습니다. 그렇다면 이 안에 method는 어떤것이 있느냐에 대해 알아보겠습니다. GET, POST 말고도 PUT이나 DELETE가 추가적으로 있지만 대표적인 GET과 POST를 먼저 알아보겠습니다. 먼저 로그인 화면을 구성해보도록 하겠습니다. 이런식의 로그인화면을 마크업 하는건 쉽게 할 수 있습니다. form 요소안에 fieldset을 기재하고 그 안에는 legend요소와 input 요소 그리고 button을 추가하면 되는 간단한 마크업입니다. 본론으로 들어가서 get과 post에서 알아보자면 ..

저번 포스팅에서는 테이블에 대한 기본적인 설명을 드렸습니다. 이번 포스팅에서는 테이블을 어떻게 활용하는지 예제를 들어보겠습니다. 이 사진을 보시면 테이블로 하나의 구단순위를 만들어 본 예제입니다.바로 소스코드를 보고 설명을 드리겠습니다. table 활용 구단 순위 구단 순위표 순위 팀 승 패 1 맨시티 32 2 2 맨유 25 7 3 토트넘 23 7 자료제공 : 제공 저번 포스팅에서도 설명을 드린것과 같이 테이블 요소안에 border라는 속성은 css에 써야하지만 처음엔 보기 편하게 하기위해 기재하였습니다. 테이블은 표를 나타내는걸로 설명을 드릴 수 있는데요 caption 요소와 테이블의 구성 그리고 웹 접근성을 위하여 summary 속성까지 써줘보았습니다. 마지막에 colspan이 있는데 colspan과..

이번 포스팅에서는 표를 나타내는 요소인 Table 요소에 대해 설명을 드리겠습니다. 우선 테이블 요소는 표를 나타내주는데요, 우리가 흔히 볼 수있는 여러가지 표중에 다음 사이트에서 찾아 가져와 보았습니다. 사진출처 : 다음스포츠 위 표가 보이시나요? EPL 구단 순위를 나타내는 표인데요 지금 현재 상태는 표가 꽤나 보기쉽고 디자인이 되어있습니다.하지만 이 테이블에서 CSS를 제거하면 바로 아래와 같은 사진이 나오게됩니다. 선이 없어서 보기가 더 힘들지만 위에 보이시면 순위 표 라고 기재가 되어있습니다. 이처럼 표를 만들어주는 요소인 table요소는 여러 부분에서 사용이 되고있습니다. 한가지 덧붙여 말씀드리자면 이 표를 나타내는 table요소로 예전엔 레이아웃을 배치하곤 했지만 요즘은 그렇지가 않습니다. ..

이번 포스팅은 폰트 어썸 (Font Awesome)에 대하여 알아보겠습니다. 다소 생소할지도 모르지만 특히나 대학교 전공수업때 웹 프로그래밍을 배우셨던 분들도 모르시는 분들이 꽤나 많은데요 우선 폰트 어썸이란 폰트를 아이콘처럼 사용하는 방법을 말합니다. 쉽게 이야기해서 우리가 많이 본 아이콘들은 사진으로 많이 사용을 하는데 이 폰트 어썸을 이용하면 사진이 아닌 폰트 그자체로 아무리 확대를 해도 깨지지가 않습니다. 폰트어썸을 사용한 실제 웹사이트를 한번 볼까요 ? 다음 사진을 보면 제가 font awesome을 사용하기 위해 찾는 사이트인데요 사이트의 주소는 https://fontawesome.com/ 입니다.지금은 현재 사이트를 캡쳐해와서 사진으로 나오기 때문에 확대를 하면 이미지가 깨질겁니다. 하지만 ..

이번 포스팅에서는 CSS 를 제거한 오로지 HTML 만을 이용해서 다음 UI 를 만들어 보겠습니다. 우선 UI는 사용자 인터페이스를 말하는 겁니다 ! 먼저 예제 사진을 보여드리도록 하겠습니다. 이런식으로 UI를 만들게 되는데요 방법은 다양하며 아직 기재하지 않은 기술도 역시 포함이 되어있습니다. 이에대한 제가 기술한 코드는 다음 포스팅에서 업로드 해드리며 부가적으로 설명을 드리겠습니다.

이번 포스팅은 로그인화면을 구현 하기 위한 기초적인 Form 요소에 관하여 알아보겠습니다. From 이란 검색이나, 로그인, 회원가입 등 사용자가 입력한 구문을 서버로 넘기기 위한 입력 서식 요소라고 볼 수 있겠는데요 사진으로 한번 알아볼까요 ? (사진 출처 : Daum 로그인 화면, 검색입력창) 이런식으로 다음에 로그인을 하기 위한 입력과 검색어 입력을 하는 부분은 모두 폼으로 이루어져 있습니다. 정말로 폼으로 이루어져 있는지 확인을 하려면 개발자 도구를 이용하여 확인해보면 쉽게 볼 수 있습니다. 확인을 해보면 실제로 다음 로그인 화면에 실제로 form을 사용하였네요 아직 학습하지 않은 여러 요소들이 있지만 이중에 오늘 하게될 폼 요소에 대해서 알아보겠습니다. 먼저 코드를 보게되면 유저 입력 폼 NAV..

저번 포스팅에 대해 간략히 제목 요소인 h1~h6까지 한번 사용을 해보았는데요 ! 이번 포스팅에서는 html의 요소중 p, br, pre요소에 대해 한번 알아보겠습니다. 앞으로 포스팅은 Webstrom 에서 주석을 통하여 코드를 설명하는 방향으로 진행을 할 계획입니다. 포스팅에서 설명하는 사항은 아마도 추가적인 사항이나 실행시 화면에서 어떤 결과가 보여지는지 사진을 통하여 설명을 할 것같네요. 자 그럼 시작하겠습니다. 길거리 구자민 하늘색 음악과 그리운 초록색 길거리 에서 날 부르고있죠 그때의 그리운 마음과 기억이 눈부시도록 웃죠 그런 그 모습에 세상이 펼쳐졌죠 pre 예제 연습 test 화면 구동 ... .... 저번에 설명한 것은 주석을 제거하고 새롭게 나타난 항목에서만 주석을 처리 하였습니다 ! 이..