Recoding & Share Devlog

1. window.frames['iframe id 값'] 상위 frame과 도메인이 다른 frame에도 접근 가능한 스크립트이다. window.frames['container_1'].document~ 로 접근 2. $('iframe[id=id 값]')[0].contentWindow .contentDocument로 바로 document에 접근할 수 있다. 3. document.getElementById('iframe id 값').document 상위 document를 타고 하위 iframe에 접근하기 때문에 하위 iframe의 도메인이 다르다면 접근이 불가능하다. 위와 같이 div로 구성된 드롭다운 메뉴를 선택해야 할 때가 있다. $('#cmbGndrCd-2-row-0').trigger('mousedown..

박스 모델에 대해서 알아보면 먼저 F12를 통하여 해당 영역의 크기를 볼 수가 있습니다. 예를들면 이런식으로 내부에 크기가 있고 그 위에 패딩 보더 마진 이런식으로 보여지는것을 통틀어서 박스모델이라고 합니다. 코드의 주석과 내용을 보고 결과 화면을 보겠습니다. 박스모델 /* 박스모델 - 한 요소가 박스의 모양을 갖는 모델 - width, height, padding, border, margin 로 구성 - 더 정확히 말하면, width, height, padding-top, padding-right, padding-bottom, padding-left, border-top, border-right, border-bottom, border-left, margin-top, margin-right, margi..

오랜만의 포스팅입니다. 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 저번에 했던 선택자에서 추가적으로 선택..

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

이번에는 저번에 하지 않은 margin, padding, border에 대한 포스팅입니다. 이런식의 레이아웃을 구성을 해보겠습니다. 실제로 많이 색상 이나 그림자 모양을 만드는 것은 많이 사용이 됩니다. 먼저 html 마크업을 보면 간단합니다. ABC Hello 이정도의 마크업만 되어있습니다. div 3개와 hr 요소가 있네요 그럼 css는 어떻게 되어있을지 보겠습니다. 보더 hr { margin-top: 30px; margin-bottom: 30px; /* margin은 바깥쪽 여백을 의미합니다. top, right, bottom, left가 있습니다. 이 모든 것을 포괄하는 것이 margin 입니다. */ } #box { width: 100px; height: 100px; background:#03D..

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은 인라인요소 ..

이번 포스팅에서는 여러 입력 요소에 대한 설명입니다. 여러 입력요소로 회원가입 폼을 한번 만들어 보겠습니다. 이중에서 포스팅하지 않은 요소는 날짜를 입력 할 수 있는 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에서 알아보자면 ..