본문 바로가기

분류 전체보기

자바스크립트 9 - 함수연습 연습 꼭~! //삼각형의 넓이 function shape(w,h){ function tri(){ return (w*h)/2; } function quad(){ return w*h; } document.write('삼각형의 넓이 : '+ tri() +' '+ '사각형의 넓이 : ' + quad()); } shape(10,20); function fun(){ return function(x){ //리턴으로 반환하는데, 익명함수로 반환할수있다. for(let i=0; i 더보기
자바스크립트 8 - 화살표 함수 화살표 함수는 익명함수를 만들때 사용하기 좋다. let fun2 = ()=>{ let call =prompt('이름이 뭐니~?',''); return alert(call + '~! 반갑다~!'); } fun2(); let callBack = ()=>{ return document.write('콜백함수 호출 '); } callBack(); let alert1 = ()=>{ return alert('함수호출1 - 리턴전실행문'); } alert1(); 더보기
자바스크립트 7 - 함수 종류와 작성방법 함수연습 필수~! 1. 함수 종류에는 익명함수와 선언적 함수가 있다. 함수는 선언부와 호출부가 있다. 즉, 함수선언 -> 함수실행문작성 -> 리턴으로 반환하는 식으로 작동한다. 익명함수는 선언하고 난 이후에 호출한다. 선언적 함수는 어디에 선언해도 자스에서 이미 가장 먼저 읽어주기 때문에, 선언부를 어디에 적어도 호출이 된다. fun1(); let functionName = function(){ alert('좋은아침입니다.-functionName함수호출'); }; functionName(); function fun1(){ alert('좋은아침입니다.-fun1함수호출'); }; let fun2 = function(){ let call =prompt('이름이 뭐니~?',''); alert(call + '~!.. 더보기
자바스크립트 6 - 반복문 for, while, do while 연습문제 꼭 풀기~! See the Pen 반복문연습 by LimsUIUX (@LimsUIUX) on CodePen. 더보기
자바스크립트 5 - 연습문제 ( if | switch | 삼항연산자) 아래 문제를 풀어보면서 연습~! 문제1. 1주일에 7000보이상 걸으면, 건강한 습관을 가지셨군요, 그렇지않으면, 운동을 좀 하세요~! let walkNum = Number(prompt('1주일에 몇보 이상 걷나요?', '')); if(walkNum >= 7000){ document.write('건강한 습관을 가지셨군요 '); }else{ document.write('운동을 좀 하세요~! '); } 문제2. 1주일에 음주를 몇회 하시나요? 3회 이상 : 경고~! let drinkNum = Number(prompt('1주일에 음주를 몇회 하시나요?', '')); if(drinkNum >= 3){ document.write('음주를 줄여야 겠네요~! '); } document.write('좋은 습관을 가졌네.. 더보기
자바스크립트 4 -연산자 종류와 연습 연산자의 종류 복습 -산술연산자(사칙) : + - * / %, + 연결, / 몫, % 나머지 -대입연산자 : A=B : A에 B를 대입(할당)한다. -복합대입연산자 : +=, -=, *=, /=, %= -증감연산자 : ++, -- (전치, 후치) -비교연산자 : true/false를 반환 -논리연산자 : &&(AND) ||(OR) !(NOT) : true/false를 반환 -삼항연산자 : 질문 ? true문 : false문; See the Pen 연산자연습 by LimsUIUX (@LimsUIUX) on CodePen. 더보기
Flexbox Layout 레이아웃을 정리할 때 사용하는 속성으로 flex를 소개한다. flex는 블록속성의 박스를 만들어 준다. 레이아웃을 정리 할때, 브라우저에서 긴 레이아웃을 정리 할때 보통 스크롤을 내려서 볼 수 있도록, header, section, footer, div(구) 등의 순서가 아래로 내려오도록 정리했다. 이러한 태그들은 블록속성을 가지고 있기 때문에 자연스럽게 아래로 내려가는 수직구조를 만들어 준다. 블록 속성을 가진 태그들은 row 전체를 차지 하기 때문이다. 이러한 블록 속성으로 인해 세로로 떨어지는 수직구조를 작성 할 때는 어려움은 없지만, li태그를 이용한 가로 배치 메뉴 등을 만들거나, 3단, 4단 등의 배치를 하는 레이아웃은 float:left나, display:inline-block(여백이 생김).. 더보기
css 위치와 공간 해석 - float float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져나와 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float 은 left, right, none, static 등으로 속성값을 부여할 수 있다. float:left는 원래 좌측으로 보내라는 의미로 흔히 받아들이고 있다. 그렇다고 해서, float을 위치를 지정하는데 사용한다고 무조건 해석하면 무리가 있을때가 있다. float:left는 이미지와 같은 요소의 옆에 글씨를 작성했을 때, 아래 그림처럼 글씨가 이미지의 하단에서부터 시작하게 되는데, 이를 이미지와 같은 높이에서부터 시작하도록 하기 위해 사용하는 속성이라고 할 수 있다. 아래 첫번째 그림처럼.. 더보기
css 공간의 이해 3 - margin collapsing 블록속성을 가진 요소를 자식으로 가지고 있는 부모요소는 margin이 생기지 않는다. 예를 들면, h태그는 위아래 margin을 가지고 있는데, 부모요소인 container3에 배경색을 넣고 보면, 자식요소인 h1에 margin이 표현되지 않은걸 확인할 수 있다. 이때, 부모에 overflow:hidden이나, 이 방법 외에도, display:flow-root를 적용하면, 자식요소인 h1의 margin이 표현되는 걸 확인 할 수 있다. 1. HTML 부분 box3 2. CSS 부분 .container3{ background: #f00; /* overflow: hidden; */ display:flow-root; } h1{ background: #fee; } 이처럼, 자식요소의 공간에 float, marg.. 더보기
css 공간의 이해 2 - - margin collapsing margin은 겹침현상이 생긴다. margin이 적용된 부분이 겹치게 되면 두번 모두 적용되는 게 아니라 한번만 적용된다. 1. HTML 부분 box2 box2 2. CSS 부분 .container2{ background: #8887a1; width:300px; overflow: hidden; } .box2{ width:200px; height:200px; background: #f80; margin:20px; } 이미지 첨부 예정~! 더보기
css 공간의 이해 1 - BFC 1. block formatting context 블록 속성을 가진 자식 요소에 float 을 부여하게 되면, 부모 요소는 자신의 높이값을 잃게 된다. 부모는 자식을 포함하므로, 자식의 높이값을 모두 품을것이라고 생각 할 수 있지만, 모든 요소에 해당하지는 않는다. 아래 사이트에 여러가지 예가 정리 되어 있으니 참조바람, 대표적으로 float 속성을 가진 자식요소가 있을때이다. float은 원래 이미지와 문단의 정렬을 위해 사용하는데, 이미지를 좌측, 이미지를 감싸고 문단의 내용이 들어가게 하게 정렬이 된다. 이렇듯, 부유하는 속성을 가진 float 이 적용된 요소의 부모요소는 자식요소 의 높이값을 포함하지 않게 되는데, 이럴때 문제점~!! 1. 배경에 적용한 색상이나 배경이미지가 잘리는 경우 2. 다음.. 더보기
폰트 제너레이터 - 웹용폰트 | font convert 1. 다운로드 받은 폰트의 파일 형식을 웹용으로 전환한다. 2. 다운로드 받은 폰트의 font-family 이름을 만들어 준다. 1. transfonter.org/ 사이트에 접속한다. ( 여기 말고도 구글에 font transfer 검색하면 다른 사이트도 많이 나온다. ) 2. Add Fonts 버튼을 누르고, 나의 컴퓨터 안에 있는 폰트 파일을 추가 한다. 3. Convert 버튼을 누르면 하단에 converting을 진행하게 된다. 4. 그러고 나면 아래 그림처럼, Download 버튼이 생기고, 버튼을 누르면 된다. 5. 다운로드 폴더로 이동해 zip파일의 압축을 푼다. 6. 폴더 안에 웹용 폰트인 woff 파일이 만들어 졌고, demo 문서를 열어 보면, 아래 그림처럼 font-family : '.. 더보기
coding tip - 2. about margin & overflow(BFC) 1. BFC : Block Formatting Context BFC 의미 : overflow는 새로운 body가 생기는것처럼 독립적인 문서가 시작된다. 자식요소에 float이 들어가면 부모는 높이를 갖지 못한다. float의 개념때문인데, (부유함)이때 overflow:hidden을 주는것이 이 때문. 1-1. 안에 있는p태그의 시작점은 container의 시작점과 같다. 이때가장 쉬운 방법: margin을 적용하여 .left와 떨어뜨린다는 점이 있는데, overflow:hidden은 부모의 높이를 유지하려고 만든 속성은 아니다. 그러나 float와 같이 쓰일때, 높이 유지의 문제해결을 할 수 있다. 왜일까? float는 위로 뜬다. 부모입장에서 float의 높이를 인지하지 못한다. body는 최상위 요.. 더보기
coding tip - 1. about vertical-align vertical-align: middle/baseline은 서체의 기본 위아래 여백에 의해 유동적일 수 있다. 그러나, vertical-align: top;은 변수가 좀 적다. 영어의 베이스라인은 세로정렬이 어느정도 비슷하지만, 한글은 초-중-종성을 모두 갖고 있어 좀 더 유동적이다. 그래서 되도록 상단을 기준으로 여백을 맞춰 주는 게 좋고, 오류를 최소화 해준다. 이렇게 vertical-align을 사용해서 세로간의 기준을 맞춰주고, 조금씩 서체의 여백에 의해 생기는 간격은 브라우저를 확인하면서 margin으로 정리한다. 인라인 텍스트 여기는 새로운 badge입니다. body{background: #eee;font-size: 3.0em;} .container{background: #fff; color:.. 더보기
웹표준 검사 웹표준 검사를 HTML과 CSS 각각 진행해 본다. HTML문서에 대한 validator 검사를 진행하면 아래와 같은 그림처럼 나온다. 그리고 하단에 아이콘이 생성되고, 코드를 복사해서 문서에 첨부 하면 된다. validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사 validator.kldp.org css-validator.kldp.org/ W3C CSS 검사 서비스 파일 업로드를 통한 검사 직접 입력을 통한 검사 css-validator.. 더보기
레이아웃 기초 1 HTML Mark up은 아래 코드를 참고 한다. HTML5 시멘틱 태그로 구조를 정리하고, 문서 전체에 가로축 반복 배경이미지는 body에 넣을 예정이라, 태그를 별도로 넣지 않았다. menu menu menu menu menu 첨단기술과 새로운 솔루션으로 고객의 기대를 앞서가는 기업 끊임없는 혁식을 통해 경쟁기업보다 첨단기술과 소재를 개발 제공합니다. 제품개발과 판매 뿐만 아니라 개별 고객이 필요로 하는 것을 찾아 문제를 해결해 주는 적극적인 가치를 창출하고 제공합니다. 경영에서 신뢰 받는 기업 열린경영을 통해 고객, 주주, 구성원의 소리를 경청하고 정직과 신의로 대응하여 Win Win 하는 동반자 관계를 구축한다. 구성원 개개인을 존중하여 성장기회를 부여하는 신바람 나는 직장을 만들어 나갑니다. F.. 더보기
img의 배치 활용 레이아웃이라 하기엔 너무 단순하지만, 이미지를 여러개 두었을 때 생기는 여백에 대해 정리하고자, 아래와 같이 문서를 만들어 보도록 한다. 여기서 핵심 속성은 img{vertical-align: top;} 이미지태그는 이미지 자체가 크기를 가지고 있기 때문에 블록인지 인라인인지 잘 구분하기 어려울 수 있다. 1. 이미지 태그에 있어 기억할 점 : img태그는 inline속성을 갖고 있어 한 줄에 다음 요소가 이어서 오게 된다. img태그는 아래 그림처럼 바로 다음에 오는 요소가 이미지의 우측 하단부터 오기 시작한다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 즉, 태그 안에 있는 여백들이 공백태그로 작동하여, 브라우저마다 적용되는 기본 글자의 여.. 더보기
css animation animation속성을 이용해 css에서도 애니메이션이 가능하다. 주로 transform의 속성인 크기, 위치값, 회전, 색상, 투명도 등에 애니메이션을 사용한다. 속성 속성값 설명 animation-name ani(직접 지어주는 이름) 애니메이션의 이름을 지정 animation-duration 2s 애니메이션 재생 시간(s) animation-timing-function 기본값 : ease linear | ease-in | ease-out | ease-in-out ... 애니메이션 가속도(ease) 출발이나 도착지점에 빠르기를 지정하는 속성 animation-delay 2s 애니메이션 지연 시간(s) 일정 시간 이후, 애니메이션이 재생되도록 함 animation-iteration-count number.. 더보기
:focus selector - 2 2단, 3단 레이아웃에서도, 문서의 길이가 길 때 :focus와 앵커링크를 활욜하여 tap키로 문서의 위치를 이동할 수 있다. skip메뉴를 이번에는 ul>li로 정리해 보았다. skip 하위에 있는 ul>li>a요소 안에는 href속성 값으로, 문서 안의 이동할 위치에 부여한 id값을 적어주어 문서 내에서의 이동을 할 수 있는 앵커링크를 만든다. ※ 핵심내용 : 1. 위의 레이아웃 모양 정리 2. skip a안에 anchor link값 넣기 See the Pen :focus selector 2 by LimsUIUX (@LimsUIUX) on CodePen. 더보기
:focus selector - 1 focus선택자는 포커스가 있는 요소를 선택 하는데 사용하며, 일반적으로 키보드이벤트(tap키 등)을 허용하는 요소에 주로 쓰인다. :focus { css declarations; } css만으로 skip메뉴를 만들어 볼 수 있다. 메뉴를 상단에 고정하도록 css를 만들어 주고, 안보이게 한 다음, (여기서는 dl>dt+dd를 사용하영 skip메뉴를 만들고, dt는 안보이도록 css를 설정해 두었다. ) :focus에 앵커링크를 연결하도록 한다. See the Pen :focus selector by LimsUIUX (@LimsUIUX) on CodePen. 더보기
multi-column multi column은 문단을 다단으로 편집하는 속성이다. 속성 속성값 설명 column-count number 다단의 개수 column-gap px 다단 사이의 간격 column-rule-style solid | dotted | double 구분선의 종류 column-rule-width px 구분선의 두께 column-rule-color color 구분선의 색상 column-rule solid 1px #333 short hand column-span all 다단 안의 요소를 다단편집에서 해제시킴, column안에 h2태그가 있을때, h2 { column-span: all; } column-width px | % 브라우저에 대한 최소 너비를 지정함 즉, 브라우저가 작아질때, 단의 최소 너비 column.. 더보기
레이아웃의 흐름 그동안 레이아웃을 정리하는 방법론은 몇번의 흐름이 있어왔다. 90년대 중반에 사용하던 프레임셋 요소를 시적으로, 90년대 후반부터는 행열정렬이 가능한 테이블요소 가지고 페이지의 레이아웃에 사용하였으며, 2000년대 들어서서는 div같은 블록요소에 위치속성( float이나 position 등)을 부여하여 패이지 레이아웃을 정리하여왔다. 2010년대 웹표준 문서에 대한 규격이 적극 권장되면서 드디어 논리적, 의미론적 시맨틱 태그가 새롭게 탄생하고, 이 시맨틱 태그와 위치속성(여전히 float, position 등)을 할용하여 레이아웃을 정리하였다. 이후, 위치 속성 중 flex가 보편화 되어 가는 추세이며, flex를 발전 시킨 grid를 권하고 있는 흐름이다. 우리 나라의 경우 IE에 대한 애정도가 높았고.. 더보기
가시속성을 활용한 서브메뉴 앞서 살펴 본 가시 속성을 활용해서, 메인메뉴에 마우스를 올리면, 서브메뉴가 나오고 메인메뉴와 서브메뉴에서 마우스를 떠나면, 서브메뉴가 사라지도록 함 주요 개념 : 공간의 크기속성 height:0 --> height:auto 가시 속성 : opacity:0 과 overflow:hidden --> opacity :1, ※ 주의할 점 : .sub_menu에 가시속성 중 opacity를 0으로 적용했다가, #main_menu>li에 hover하면, opacity:1로 나타나게 함. 여기에 height:0으로 적용해서, 아예 공간의 크기도 없애 버리는데, .sub_menu의 하위요소인 li가 블록속성 공간을 차지 하므로, .sub_menu에 height:0을 주더라도, 자식인 li는 공간이 남아 있게 됨. 따라.. 더보기
가시속성 가시속성은 보이는지 안보이는지를 정해주는 속성이다. display, opacity, visibility 로 각각 공간을 차지 하는지 아닌지다 다르므로, 작성해 보도록 한다. 이 외에도, 넘치는 부분에 대한 가시속성인, overflow : auto | hidden | scroll 이 있다. 속성 속성값 설명 display none | block 내용, 공간이 삭제됨 opacity 0~1 내용 안보이고, 공간 유지 visibility hidden 내용 안보이고, 공간 유지 overflow hidden 감싸는 요소의 크기를 넘치는 부분은 안보이게 함, 넘치는 공간 삭제됨 111 222 333 444 555 666 777 더보기
transform, transition 속성 ※ transform 속성의 의미 : css코드로 요소를 변형하는 속성이다. 속성 속성값 속성값사용 설명 transform translate translate(50px,40px) x,y 축으로 위치 이동 translateZ translateZ(-300px) z축으로 위치 이동, 원근감이 생기므로 부모요소에 perspective와 함께 작성 rotate rotate(-30deg) 시계방향(+), 반시계방향(-)으로 회전 scaleX scaleX(1.5) 가로축의 비율 scaleY scaleY(0.7) 세로축의 비율 skewX skewX(-30deg) X축으로 기울기 skewY skewY(-15deg) Y축으로 기울기 matrix matrix(.4,1,0,1,20,40) scaleX, scaleY, skew.. 더보기
ankor link 2 - 외부 문서 내 특정위치로 이동 앞서 a태그의 href속성에 아이디 값을 붙여 문서 내에서 특정 장소로 이동하는 것을 만들어 보았다. 외부 문서의 특정 장소로 이동하는 방법은, href 속성에 외부문서링크와 #아이디명을 붙여서 적는다. 1. 문서 내에서 이동하는 방법 : 링크태그에 아래와 같이 작성한다. A로 가기 문서 내에서의 이용 A로 가기 B로 가기 C로 가기 문서의 A 문서의 B 문서의 C Top 2. 외부문서의 메뉴에서 다른 문서 내의 링크로 이동 : 외부문서의 메뉴에 링크는 아래와 같이 작성한다 . A로가기 외부문서의 앵커링크 메인문서의 A로가기 메인문서의 B로가기 메인문서의 C로가기 위와 같이 작성하면, 메뉴를 누르면 main문서의 해당 아이디로 이동하게 된다. 더보기
anchor link 1 - 문서 내 이동 a 태그는 href 속성값에 의해 문서간의 이동이 가능하다는 것을 알고 있다. href속성값에 다른 문서로의 이동이 아닌, 자신의 문서 안에서 다른곳으로 이동시키고자 할때, 이동 될 박스에 id값을 주고, a 태그의 href속성에는 #target1이라는 속성값을 적용한다. (예 : target1으로 바로가기 ) 그리고 나서 같은 문서 안의 박스에 아이디값을 부여한다. (예 : ) 하나의 본문에서 id속성이 부여된 박스에 바로 가게 할 수 있는 것을 anchor link라고 한다. See the Pen yLNvJrW by LimsUIUX (@LimsUIUX) on CodePen. [림스Tip1] 다른 문서에서 본문의 target1로 이동하고자 할때는 타겟문서의 target1으로 이동 라고 적는다. [림스T.. 더보기
html5를 활용한 기초 레이아웃 See the Pen VwLyXva by LimsUIUX (@LimsUIUX) on CodePen. !!! 포인트 1. body태그에 좌측 여백을 둔다. 2. body태그에 배경이미지를 넣는다. body{ background-image:url("img/living.gif"); background-repeat: no-repeat; background-position: 0 50px; background-size: contain; margin-left:280px; margin-top:50px; } 3. 메뉴 정리는 ul>li>a로 하되 - a태그에 크기를 넣기 위해 display : inline-block으로 지정 - 우측테두리를 넣고, 마지막 요소만 따로 선택자로 가져와 테두리 없앰 4. li에 list-s.. 더보기
position 속성 2 - 활용 position을 활용하여 큰 틀을 만드는 레이아웃을 정리해 보도록 한다. LOGO topmenu gnb menu main img content footer 공간의 크기는 width와 height 뿐만 아니라, padding, border, margin을 활용하기도 한다. 여기에서는 height로 높이를 주는 대신 padding을 활용하여 높이가 생기도록 하였다. 위의 padding대신 height값을 부여해도 좋다. 이때, 글자가 높이의 가운데 오도록 하기 위해 line-height를 height와 같은 높이값을 부여해도 된다. 더보기
position 속성 1, z-index ※position 특징 위치를 정해주는 방법 중 하나로, 조상(부모)와 자식간의 관계에 의한 위치속성이다. 속성 속성명 설명 position static 기본값 absolute 부모나, 조상요소에 대해 위치값을 부여받는다. 위치지정속성인 top, left, right, bottom의 값을 함께 적는다. fixed 브라우저에 대해 절대 위치값을 갖게 된다. 위치지정속성인 top, left, right, bottom의 값을 함께 적는다. relative 코딩의 흐름에서 자신이 갖는 위치가 기본값이며, 이를 바꾸고 싶을 때는 "left:20px" 처럼 값을 더 부여한다. 그러면 원래 자기의 위치에서 좌측으로 20px 들어가서 위치한다. -----------------------------------------.. 더보기

티스토리툴바