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/ 입니다.지금은 현재 사이트를 캡쳐해와서 사진으로 나오기 때문에 확대를 하면 이미지가 깨질겁니다. 하지만 ..

저번 포스팅에서는 다음 UI 를 구현해보는 포스팅을 하였는데요, 실제로 웹사이트에서 많이 쓰이고 시각적으로도 보이는 파비콘을 적용하는 것과 내부링크에 대하여 설명을 해드리겠습니다. 우선 파비콘은 저번 포스팅에서도 본것과 같은 웹브라우저에서 브라우저의 title 옆에 있는 아이콘같은 이미지를 말하는데요 파란색으로 표기한 부분이 바로 파비콘이라고 합니다. 그럼 파비콘에 대해서 설명을 해드리겠습니다. NAVER 사실은 파비콘은 간단히 link 요소를 통해 이미지 파일만 있으면 간단하게 쓸 수있습니다. 설명에 link는 자식요소가 없다고 말했는데 이 말은 즉 열고 닫힘이 한번에 가능한 요소임을 뜻합니다. 이러한 구문 많이 보시지않았나요 ? 이미지라는 요소를 사용할때도 열고닫힘이 한번에 이루어졌습니다 ㅎㅎ 이런 ..

안녕하세요 이번 포스팅에서는 저번 다음 UI 만들기 포스팅에 대해서 제가 작성한 솔루션을 알려드리고자 작성하겠습니다. 바로 코드부터 보겠습니다. 다음 ui 실습 검색 통합검색 검색 서제스트란? 인기 검색어 초등학교 교사 사망 김지은 안희정 신성우 아내 양승태 도망 이재명 압수수색 방송사 먹방 폭로 다음을 시작페이지로 전체 서비스 미디어 뉴스 스포츠 아고라 오늘의 정보 07.11(수) 날씨 서울시 흐림영상 29도 29°C 날씨 경기도 흐림영상 29도 29°C 로그인 Copyright © KaKao Corp All service 이번 코드에서는 주석을 달지 않았는데요 차근차근 하나씩 설명을 드리고자 하기위하여 주석을 제거했습니다. 첫번째 줄부터 시작을 해보면 아직 배우지 않은 link 요소에대..

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