Recoding & Share Devlog

오랜만의 포스팅입니다. Title /* id 가 list 의 요소의 자손들중에 li를 전부 선택 */ #test1 li { color:red; border : 2px dotted #512335; margin : 7px; padding : 5px; } /* id 가 list 인 요소의 자식인 li 의 자식인 span 요소를 선택 */ #test2>li>span { color : blue; } /* 1) 요소 선택자 : 요소명 2) id 선택자 : '#' 3) class 선택자 : '.' 4) 자손 선택자 : ' ' 5) 자식 선택자 : '>' */ 리스트1 리스트2 리스트3 리스트4 리스트1 1 리스트2 2 리스트3 3 리스트4 4 테스트1 테스트2 테스트3 테스트4 저번에 했던 선택자에서 추가적으로 선택..

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..

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

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

HTML 에 대해서 첫 포스팅을 시작하겠습니다. 먼저 저의 개발환경은 WebStrom으로 실행을 하였고 프로젝트를 생성하여 첫 번째 HTML 파일을 만들어 시작을 하였습니다 ^^ ! 먼저 HTML 을 만드는 가장 기본적인 항목부터 알아갈탠데요 ! HTML파일 생성시 나오는 저 구문들에 대하여 하나씩 풀어 해쳐보겠습니다 ! 다음 검색 인기 검색어 주요 서비스 전체 서비스 오늘의 정보 미디어 뉴스 많이 본 뉴스 꼼꼼히 본 뉴스 댓글 많은 뉴스 아 ! 한 가지 HTML 에서는 주석을 이런 식으로 사용을 한답니다 ! 주석이란 코멘트라고 말을 할 수있는데요 ! 개발자들이 주석을 달아 어떤 요소라던지 어떤 함수라던지 그 부분에대하여 설명을 써놓게되면 다른 개발자가 보았을때 그 프로그램을 다룰 수 있도록 혹은 자신이..