코딩각

텍스트 라인 수 제한 출력(콘텐츠 줄 자르기) webkit - HTML/CSS

CSS 텍스트 라인 수 CSS는 복잡하고 전문가의 영역이라 초보자가 작성하다 보면 간단해 보이는 것도 잘 안되서 인내심을 테스트하는 경우가 좀 있습니다. 텍스트를 좀 깨끗하게 출력하고 싶은데 div 블록에 height, width 를 열심히 만든 후 박스 밖으로 흘러나가는 텍스트를 보면 4차 IT산업시대의 분노감이 느껴지기도 합니다. (개인의 성향에 따라 다를 수 있음) 웹페이지라는 한정된 공간에 다양한 내용을 넣기 위해서 사용할 수 있는 방법은 여러가지가 있는데 브라우저에서 처리할 수 있는 방법은 좀 가릴 부분을 가리고 보여주는 방식이 있습니다. 보통 summary (요약)된 본분(description)을 가져와서 라인 수를 제한해야하는 경우에 사용할 수 있는 CSS로 벤더프리픽스 -webkit-lin..
코딩(CODING)/HTML | CSS 2022. 3. 15. 01:10

Brackets 설치와 확장 기능 셋업 - HTML/CSS 코드 에디터

Brackets - HTML/CSS Brackets(브라킷츠)는 코드 에디터로 다양한 프로그래밍 언어의 소스코드 편집에 사용할 수 있지만 HTML/CSS 코딩을 할 때 가장 많이 쓰이는 에디터입니다. Brakets의 고유 기능인 실시간 미리보기에서 HTML/CSS 파일을 수정할 때 완벽한 실시간 미리보기가 지원되므로 프론트엔드 디자인하기가 수월합니다. 비주얼 스튜디오 코드에도 라이브 서버가 있지만 저장 후 리프레시 방식이라 그 느낌이 안납니다. 서버를 리부팅 하는 방식이 아니라 HTML 문서의 요소들의 변화를 nodejs에 DOM객체로 연동시켜 조작하는 방식 같은데 예를 들어 코드 에디터에서 마우스를 이용해서 background를 바꾸면 브라우저에 그 값을 실시간으로 전달하여 반영하는 식입니다. 프론트엔..
코딩(CODING)/HTML | CSS 2022. 3. 14. 04:32

코드팬(codepen)을 활용한 프론트엔드 웹개발 학습 (HTML/CSS)

언제부터인가 온라인에 Repl.it 같은 쓸만한 코딩 도구들이 많이 늘어나기 시작했는데 프로그래밍 언어는 종류에 따라 컴파일러나 인터프리터가 필요하고 또 의존성(dependency)이 있기 때문에 때로는 한계가 좀 있습니다. 그런데 생각해보면 웹프로그래밍은 브라우저가 개발환경이자 실행환경이라서 웹에서 IDE를 만들어 놓는다고 해도 거의 제한이 없다 시피 합니다. 특히 서버단을 뺀 프론트엔드 부분은 이미 실행에 필요한 환경이 설치된 것이나 마찬가지라 할 수 있습니다. (백엔드 환경을 설치할 수 있는 웹 IDE도 많이 있다) 그런면에서 오늘날 웹프로그래밍은 크롬이 돌아가는 수준의 컴퓨터라면 누구나가 배울 수 있는 기술입니다만, 시작하기 쉽다고 해서 뛰어들어도 조금만 깊이 들어가면 엄청난 코드의 압박을 주는 ..
코딩(CODING)/HTML | CSS 2022. 3. 13. 15:28

CSS 변수 사용하기 (사용자 지정 CSS 속성)

CSS 변수 (CSS Variable) 순수하게 프로그래밍 언어의 구조 관점에서 보면 HTML은 그래도 Markup Language니까 이해할 수 있어도 CSS는 좀 문제 의식을 느낄 수도 있습니다. 뭐랄까... 좀 적나라하게 표현하면 누더기 문법(syntax)같이 느껴지는데 이것을 조금 더 생각해보면 태생적인 한계가 있습니다. 워낙 복잡하고 빠르게 변화한 웹의 역사를 늘어놓는 것은 이해가 어려우니까 어바우퉁쳐서 소스코드와 기계어의 관계 처럼 인간의 언어와 컴퓨터의 언어의 차이때문에 발생하는 필연이 유독 CSS에 두드러지게 발생하는게 아닌가 - 그런 생각도 해볼 수 있습니다. CSS는 프로그래밍 언어의 구조화라던가 이런 것을 고려한 언어는 아닙니다. 언어라면 구조가 탄탄해야 하고 작성하는 시점에 이미 런..
코딩(CODING)/HTML | CSS 2022. 3. 12. 02:09

HTTP/CSS | 그리드(grid) 레이아웃을 사용한 반응형 레이아웃 예시

이 문서에서는 그리드 레이아웃을 사용한 반응형 레이아웃의 예시를 들어본다. 다른 레이아웃들보다 한참 늦게 웹의 세계에 등장한 그리드 레이아웃은 반응형 레이아웃의 속성을 가지고 있다. flex 레이아웃과 비슷한 점이 있지만 flex가 1차원 적인 박스를 다룬다면 grid 레이아웃은 2차원 레이아웃이라고 볼 수 있다. 그리드 레이아웃을 사용한 수많은 레이아웃이 있겠지만 블로그 등에서 많이 쓰이는 헤더, 네비, 컨텐츠, 사이드바, 푸터 정도를 잡아본다. html 을 아래처럼 단순하게 구상해봤다. 시맨틱 태그를 사용하지 않고 div 를 쓰면 CSS 선택하기가 좀더 편한데 좀 더 검색에 친화적이라고 하는 순수한 시멘틱 태그를 써봤다. 많은 이들이 시멘틱 태그를 강조하는 것도 사실인데 정말 시멘틱 때문에 검색엔진의..
코딩(CODING)/HTML | CSS 2020. 12. 12. 22:05
◀ 1 2 3 4 5 6 ··· 8 ▶

티스토리툴바