본문 바로가기

분류 전체보기229

CSS Flex(Flexible Box) 완벽 가이드 대부분 사이트는 전체 레이아웃이 수직 구성이며 ‘위-아래’로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다. 하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 조금 다릅니다. 문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우 나 float 혹은 inline-block 등의 도움을 받았습니다. 하지만 이러한 방법들은 다양한 문제(Clear, White space 등, 해결은 가능하지만..)를 가지고 있기 때문에 결국 수평 레이아웃 구성의 차선책일 뿐이며, 이제.. 2021. 5. 2.
간단한 jQuery 갤러리 간단한 jQuery 갤러리간단한 클릭이벤트 레이아웃 갤러리.클릭시 하단 박스와 그아래 텍스트를 변경한다. 대략적인 레이아웃 박스구조. html소스 총 5명의 사진을 올릴것이다. 이미지는 썸네일이미지5장, 보여줄이미지 5장. 유사반복되는 중간에 생략했다. 1234567891011121314151617181920212223242526아이돌 갤러리 아이유 소유 아이유 Colored by Color Scriptercs 클릭시 하이퍼링크의 주소와 제목이 하단이미지박스의 주소와 텍스트으로 된다 1cs이 주소와 제목이 아래에 적용12 텍스트cs jQuery없이 스크립트로만 구현하면 길어진다.12345678910111213141516171819function showPic(whichpic) { var source = .. 2015. 10. 30.
DOM 스크립트 소스-소스 코드 예제 DOM 스크립트-소스 코드 예제 에이콘풀판사 DOM 스크립트 요약본 http://channy.creation.net/project/domscripting/ 간단히 살펴보는 자바스크립트 역사자바 스크립트 문법 익히기문서 객체 모델(DOM)이란? Test: alert title 속성 자바스크립트로 만드는 온라인 사진첩 Image Gallery 1: 자바 스크립트 없는 페이지Image Gallery 2: 사진 넣기Image Gallery 3: 사진 및 텍스트 넣기Image Gallery 4: 스타일 꼭 알아야 할 핵심 기본기 Example: 스크립트 분리로 팝업 창 만들기 사진첩 기능 개선하기 Image Gallery 1Image Gallery 2Image Gallery 3 실행시에 마크업 코드 생성하기 Te.. 2015. 2. 22.
HTML5 콘텐트 모델 HTML5 콘텐트 모델HTML5의 각 요소들은 특성에 따라 분류된다. 한요소가 어떤 분류에도 속하지 않을 수도 있고 여러 분류에 속해있을 수도 있다. 분류는 아래 이미지와 같이 분포하고 있다.(이미지는 원본에서 확인가능하며 표로 정리된 것만을 발췌하였습니다.) 분류특성엘리먼트 메타데이타 콘텐트(metadata content)콘텐츠의 모양, 동작을 설정하거나 다른 문서와의 관계를 나타낸다. base, command, link, meta, nocript, script, style, title플로우 콘텐트(flow content)대부분의 body 요소 안의 요소들이 포함된다. 플로우 콘텐트는 하위에 텍스트나 임베디드 콘텐트를 포함한다.a, abbr, address, map>area, article, aside.. 2015. 2. 21.
html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항 html5 h1 엘리먼트 (section,article,aside,nav안에서) 사용의 주의사항 아주 큰 주의사항은 아니지만 브라우저별 다른 반응에 다른 반응을 보이니 살펴보자 주제1 주제2 주제3 위의 예제에서 h1엘리먼트는 첫번째는 section안에 두번째는 section안에 section에, 마지막은 그냥 코딩되어있다.문제는 브라우저마다 다르게 보인다는것몇몇 브라우저에서는 세개다 동일한 크기지만 몇몇브라우저는 크기가 다르게보인다 위예는 파이어복스와 오페라큰문제는없다.css를 사용하니 css초기값으로 동일하게 잡아주면 당연히 해결. 다만 css를 잡아주지 않을경우 대비해서 포스팅 2014. 3. 5.
hgroup 태그, HTML5에서 제외(hgroup removed from HTML) hgroup 태그, HTML5에서 제외(hgroup removed from HTML) 뒤늦게 올린다만. 2013 4월경 hgroup 태그가 html5에서 제외됬다. 다음링크참조 http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/ http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup https://www.w3.org/Bugs/Public/show_bug.cgi?id=11731 http://beautifulcss.com/archives/882 W3C는 더이상 태그를 표준 명세에 표함시키지 않겠다고 밝혔습니다. 이 태그는 문서의 개요를 작성할 때 사용되는데, 반드시 부터 까지의 태그만을 포함할.. 2014. 2. 27.
CSS 단위 CSS 단위 위는 절대값 아래는 상대값 단위 설명 in 인치(inch) cm 센치미터(centimeter) mm 밀리미터(millimeter) pc 피카 (1피카=12포인트=1/6인치) pt 포인트(1/72인치) % 다른속성값에 대한비율 ex 현재폰트의 x-height em 엘레먼트 폰트크기에상대적 px 픽셀(현 컴뷰터씬의 한 도트) rem root 엘리먼트에 상대적 각도와 시간 단위 설명 deg 각도0~360 grad gradian 각도 0~400 rad 라디안 0~6.28 turn 회전수 1turn=360deg s 1초 ms 밀리초(1/1000s) 2014. 2. 25.
HTML5 전역속성 (Global Attributes) HTML5 전역속성 (Global Attributes) 굵고 빨간건 HTML5부터 적용된것 Attribute Description accesskey 키보드 단축키 명시하고 그 페이지에서 엘리먼트를 선택 할 수 있도록한다. class 다수 선택자,엘리먼트 분류 contenteditable ture 설정으로 사용자들이 텍스트변경가능 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable contextmenu 엘리먼트의 콘텍스트 메뉴들을 정의할 수 있도록한다. 이메뉴들은 사용자가 트리거시 팝업된다. (현재는와 함께 지원되는브라우저없슴) data-* HTML 태그 안에서 사용자 데이타 저장한다 http://www.w3sch.. 2014. 2. 24.
CSS3 :first-line and :first-letter 문장 첫글자크게하기 CSS3 :first-line and :first-letter 문장 첫글자크게하기 문장의 첫글자를크게하는방법으로 :first-line 와 :first-letter를 사용할것이다.먼저 :first-letter를 이용하여 첫글자를 크게 p:first-letter { font-size: 50px; } 다음은 첫번째 줄을 굵게 p:first-line { font-weight: bold; } 그런데 두 문단이라면 이 두문단의 첫글짜가모두 커져버릴 것이다. 우리목표는 단첫번째껏만 선택, 적용하는 것이다.:first-child를 이용하자 p:first-child:first-letter { font-size: 50px; } p:first-child:first-line { font-weight: bold; } 제대로 된.. 2014. 2. 18.
HTML5 크로스브라우징 HTML5 크로스브라우징 html5shiv, ie9.js, ie7.js, modernizr, and css3pie(출처) * html5shivHTML5 요소를 지원하지 않는 브라우저에서 해당 요소를 지원할 수 있게 해주는 라이브러리. * ie9.js, ie7.jsIE를 사람답게(...) 만들어 주는 라이브러리. 구버전의 Internet Explorer에 있는 HTML 및 CSS issue들을 fix함. 투명 png에 대한 부분에 대해 처리.단순히 head 부분에 위 구문을 집어넣으면 된다. * ModernizrHTML5 & CSS3을 지원하는지를 체크해 줌.html5shiv를 포함하고 있음. 그리고 많은 일을 하지만, 딱히 html5의 많은 요소들을 쓰는 것이 아니라면 사용하지 말 것. 왜냐하면 페이지 .. 2014. 2. 18.