본문 바로가기

전체 글349

flex 기초 - flex란 무엇인가? 웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치 기능에 중점을 맞추어 고안되었기 때문에 기본 방식보다 훨씬 더 수월하게 퍼블리싱이 가능하다. flexbox는 부모 요소인 flex container와 자식 요소인 flex item으로 구성된다. flex container가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex item들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이다. flex 시작하.. 2020. 10. 29.
이미지 태그 <img>의 alt와 title 속성 일반적으로 이미지 태그는 아래와 같이 사용한다. baby.jpg 라는 파일명의 이미지 파일을 불러온 것이다. 그런데 이러한 이미지 태그 에 alt나 title 속성을 사용한 것을 볼 수 있다. 이 속성들은 각각 무엇이고 어떤 상황에 사용해야 할까? alt의 의미와 사용 이미지 태그의 alt 속성은 해당 경로에 이미지가 없거나 엑박이 뜰 때 이미지 대신 보여지는 텍스트이다. 대체 텍스트이므로 당연히 이미지의 내용을 대체할 수 있는 이미지 설명이어야 하며, 텍스트가 포함된 이미지의 경우 반드시 해당 텍스트를 함께 적어주는 것이 좋다. 시각장애인들은 alt의 내용을 리더기로 듣게 되는데, 현재 국가지침으로 정해져 있는 alt 텍스트의 글자수 제한은 없으나 통상 200~250자 정도까지를 권장하고 있다. (그 .. 2020. 10. 28.
스타일시트 vertical-align 사용해서 <div> 수직 정렬하기 vertical-align은 inline 또는 table-cell에서 수직 정렬을 지정해주는 css 속성이다. 속성값은 아래와 같다. vertical-align: baseline; /* 부모 baseline에 맞추어 해당 요소의 baseline을 정렬 */ vertical-align: sub; /* 해당 요소의 baseline을 부모의 아래첨자 기준에 맞추어 정렬 */ vertical-align: super; /* 해당 요소의 baseline을 부모의 위첨자 기준에 맞추어 정렬 */ vertical-align: text-top; /* 해당 요소 상단을 부모 요소 폰트의 상단에 맞추어 정렬 */ vertical-align: text-bottom; /* 해당 요소 하단을 부모 요소 폰트의 하단에 맞추어 정렬.. 2020. 10. 17.
함수(function) 기초 - 매개변수(parameter), 인자(argument), 리턴(return) 아래와 같은 스크립트가 있다. 일정한 규칙성이 있다면 반복문을 사용하면 되지만, 그렇지 않은 경우에 우리는 함수(function)로 풀어낼 수 있다. 아래와 같이 함수식을 작성하여 표현할 수 있다. 첫번째 코드와 두번째 코드의 결과는 똑같이 보여진다. 매개변수(parameter)와 인자(argument) 아래 두개의 코드는 같은 값을 출력한다. 그렇다면 아래와 같은 결과값을 갖고 싶다면 어떻게 하는 것이 좋을까? sum에 숫자 2와 3이 들어있다면 결과값으로 5를 출력하고, 3과 4가 들어있다면 결과값으로 7을 출력하게 하는 것이다. 위와 같이 코드를 작성하면 결과값으로 의도한 5, 7을 각각 얻을 수 있다. 여기에서 함수이름인 sum 옆의 괄호()안에 있는 left, right를 매개변수(paramet.. 2020. 10. 8.
[25주년 축하해] 디자인 소스는 클립아트 코리아! 디자인 업무를 하다보면 디자인 소스를 모두 창작하여 사용하는 데에는 한계가 있다. 원하는 사진이나 요소를 모두 구하는 것은 사실상 불가능하며, 시간도 많이 걸려서 업무효율 꽝=_= 제작하는 동안 스트레스도 많이 받는다. 그래서 우리 회사는 몇년째 통로이미지의 디자인 소스를 사용하고 있다. (소개 전 미리 말씀드리자면 '유료 라이센스'입니다.) 디자인 소스가 필요하다면, 클립아트 코리아! 클립아트 코리아를 모르는 국내 디자이너는 거의 없을 것이라 생각된다. 타 디자인 소스 업체들에 비해 퀄리티와 갯수 모두 압도적으로 뛰어나기 때문에 한번 발을 들이면 벗어날 수 없다. (실제로 중간에 다른 업체의 디자인 소스와 비교해보고 싶어서 라이센스를 동시에 구매하여 사용했던 적이 있는데, 퀄리티 차이로 인해 통로이미지.. 2020. 10. 6.
CSS 스타일시트 or <style> 태그 내에서 주석 처리하기 /*주석*/ CSS 스타일시트 혹은 html 문서 내에서 [TIP] html 주석과 마찬가지로 css 주석도 중첩 사용은 불가능하다. /* 이후의 첫번째 */가 주석을 끝내는 것으로 인식한다. 2020. 10. 4.
티스토리 플러그인으로 코드블럭 꾸미기 티스토리를 개발공부 일지로 활용하다보니 코드블럭을 입력해야 하는 경우가 많은데, 게시물을 업로드 하고 나면 늘 결과물이 불만이었다. 글과 코드블럭의 여백과 경계가 불분명하여 가독성이 떨어졌기 때문이었다. 안 예뻐 절대 안 예쁘다고! 글을 올릴때는 회색 배경의 박스 안에 들어있어서 그리 나쁘지 않은데, 막상 게시물 등록을 하고 나면 위의 이미지처럼 보여서 망...=_= 그래서 코드블럭 디자인 튜닝을 해야겠구나, 마음을 먹고 알아보니 티스토리에서 제공하는 플러그인 중에 코드블럭 테마를 선택할 수 있는 플러그인이 있었다. 이렇게 쉽게 바꿀 수 있는 거였는데 아직까지 모르고 있었다니 OTL 당장 바꾸러 가자! 관리자 페이지 좌측의 플러그인 카테고리를 클릭하면 우측 부분에 플러그인 리스트가 쭉 나열된다. 상단 부.. 2020. 9. 30.
html 문서 주석 처리하기 <!--주석--> html 문서를 작성할 때, 해당 코드에 대한 추가 설명을 넣고 싶을 때가 있는데 이럴 때 주석(comment)을 사용한다. 주석은 웹 브라우저의 페이지 소스 보기 등을 통해서는 확인이 가능하지만 웹 페이지 내에는 나타나지 않는다. 주석(comment)은 해당 코드에 대한 추가 설명이나 디버깅을 위해 작성한 구문을 의미한다. 주석은 로 마무리한다. (느낌표 유무 차이) 주석은 한줄에도, 여러 줄에도 모두 적용이 가능하여 활용도가 높다. [TIP] 주석을 중첩으로 인식하지는 못하므로, 주석 안에 또 다른 주석을 사용해서는 안 된다. 2020. 9. 30.
앵커(anchor) 만들어서 페이지 내 위치 이동시키기 앵커라는 단어는 많이 들어보았을 것이다. 앵커(anchor)의 사전적 의미는 '배의 닻'을 의미하며, 웹상의 html 페이지에서는 어떤 대상의 시작 지점을 알리는 의미로 쓰이기도 한다. 페이지의 내용이 많아 스크롤이 너무 길 때, 원하는 컨텐츠를 쉽게 찾을 수 없을 때 - 앵커 태그(anchor tag)를 이용하여 편리하게 이동할 수 있다. 아래의 이미지와 같이 section1~4로 이루어진 페이지가 있다고 가정해보자. 페이지의 상단 부분에 버튼 4개를 만들어서 클릭 시에 해당 섹션으로 바로 이동하게 한다면 방문객들이 훨씬 쉽고 편리하게 컨텐츠를 이용할 수 있을 것이다. 앵커 태그는 각 섹션의 시작 지점에 아이디값을 설정하고, a 태그를 이용하여 링크를 아이디값으로 지정해 주면 된다. 예시로 div에 아.. 2020. 9. 27.
맥북에서 USB 포맷하는 방법 회사에 디자이너님이 새로 왔다. 가지고 있던 제품 이미지들을 USB에 정리하여 전달해주기로 했다. 윈도우를 떠올리며 맥북에 가지고 있던 USB를 꽂고 마우스 우클릭을 했으나... 포맷 옵션을 찾을 수 없었다. (당황+난감) 맥북에서는 다른 경로에서 USB 포맷이 가능하다고 한다. 과정이 어렵지는 않으나 한번도 해 보지 않은 분들을 위해 이 곳에 포맷방법을 공유하려고 한다. 맥북(MacBook) 에서 USB 포맷하기 Launchpad 에서 설치되어 있는 app 목록을 보면 '디스크 유틸리티'라는 앱을 발견할 수 있을 것이다. 아이콘은 요렇게 생겼다. 선택하면 아래와 같은 화면이 뜬다. 해당되는 USB를 선택한 후에 상단 부분의 '지우기' 버튼을 클릭한다. (새로 꽂은 USB는 외장 카테고리에 위치) USB.. 2020. 9. 20.

티스토리툴바