Recoding & Share Devlog

이번 포스팅에서는 지금까지 기재한 내용을 기반으로 예제를 만들어 보겠습니다. 예전 사이트에서 많이 써본 텝 모양 만드는것 그리고 화살표를 만들어서 활용하는 포스팅 그리고 현재로도 프로필사진을 둥글게 하는 여러 속성에 대한 것입니다. 마크업은 간단합니다 html 부분을 먼저 보면 텝모양 만들기 내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다. 내용이 들어갑니다.내용이 들어갑니다. 화살표 만들기 프로필 사진 이런식으로 간단한 마크업입니다. 전체 코드를 확인해서 어떤 CSS 속성이 들어갔는지 보겠습니다. 실습 hr { margin-top: 50px; margin-bottom: 20px; } #title { width: 200px; height: 40px; border-radius:30p..

CSS 관련하여 첫 포스팅입니다. CSS의 기본부터 차근차근 알아보겠습니다. 이번 포스팅에서는 선택자에 대한 포스팅입니다. 다음과 같은 레이아웃을 만드는데는 div를 이용하여 크기를 지정하고 안에 글자를 쓴 것입니다. 바로 코드를 보겠습니다. 선택자 /* id 선택자 : 요소 한개만 선택 '#' 키워드 class 선택자 : 요소 여러개 선택가능 '.' 키워드 */ #red { color: #FF0000; } #blue { color:#0000FF; } #green { color:#00FF00; } .box{ /* border : 가장자리 border 속성 값 : 선의두께, 선의모양, 선의색상 */ margin:20px; padding: 50px; border:1px solid black; width: 2..

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

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