박지연의 코딩이야기

안녕하세요 오늘은 HTML 태그의 기초에 무엇이 있는지 알아보겠습니다. 1.      는 non breaking space의 약자로 태그는 아니지만 문자사이에 공백을 넣어주는 기능을 합니다. 예를들어서 제목를 입력했을때 출력은 기본으로 "제목"으로 되지만 제목 사이에  를 넣어주면 제 목 출력은 "제  목" 제목 사이에 일정한 공백이 생기게됩니다.더 띄우고 싶다면 여러개를 넣어주면 됩니다. 제  목 출력은 "제    목"  제   목 출력은 "제       목"   2. br 태그는 line break의 약자로 줄바꿈을 해주는 기능을 가집니다.태그는 다른 태그들과 다르게 닫는 태그를 갖고 있지않습니다.안녕하세요 안녕하세요 안..

안녕하세요! 오늘은 HTML 태그에서 많이 쓰이는 div 와 span의 차이에 대해서 알아보겠습니다. * div 와 span의 공통점 : 특정영역에 스타일을 주는 태그 * 스타일을 지정할때 inline 과 block 두가지방식이 있습니다. 1. 문자의 일부분만 선택지정(inline) 2. 넓은 범위를 묶어서 지정(block) * inline 요소 : * block 요소 : 즉 span 과 div 의 차이점은 문자열을 선택해서 지정할때는 span 비교적 넓은 범위에 지정할때는 div를 사용합니다. 예를 들어서 span은 문자열에서 원하는 부분만 선택해서 색을 바꾸는 등 스타일을 지정해 줄 수 있습니다. 안녕하세요 (입력) -> 안녕하세요 (출력) ** span 으로 묶어준 안녕만 다른 색상으로 스타일 적용..

▶ 오늘은 position 속성에 대해서 알아보겠습니다. 먼저 position을 이해하기 위해서 position의 4가지 속성에는 ◎ position 속성 4가지staticrelativeabsolutefitxed이렇게 4가지가 존재하는데요.  position을 쓰는 이유는 대표적으로 임의로 offset 값을 주기 위함입니다.* offset : 페이지 전체를 기준으로 위치값을 반환한다. = 즉 ,절대좌표 어떤 범위가 지정된 것의 위치를 바꾸게 되면 자동적으로 같이묶여있는다른 개체들 한테도 영향을 미치게 됩니다.그렇기때문에 어디에도 영향을 받지않는 독립적인 개체로 만들어 주고 위치값을 자유롭게 주어 배치하면 편리하므로position 속성은 아주 유용하고 자주 쓰이게 됩니다. ● 하지만 4가지 속성도 사용하는..

* float 속성: display block 요소는 float 요소를 무시한다!* display:inline-block 글자화 이기 때문에글자로서의 특징인 애매한 여백이 생긴다애매한 여백을 해결해주는게 display:block; 과 float:left;의 조합이다 하지만 float은 block에게 무시당하기때문에block요소인 section에게div자식은 버림을 받는다. (아래 코드펜참고)See the Pen JjjNPQz by 박지연 (@qwer273) on CodePen.section은 현재 div자식취급을 하고있지않으므로 div자식들 밑에막내를 데려와서 div도 자식 취급을 하도록 도와준다. 막내투입하는 공식 ::after 이용하기section::after{content:””;display:bl..

See the Pen Untitled by allis (@qwer273) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

See the Pen gOYNjPd by 박지연 (@qwer273) on CodePen.