본문 바로가기

전체 글79

HTML Living Standard(3) | 각종이미지들 ✨이미지 태그는 만 쓰는것이 아님 지금까지 이미지 삽입할때는 태그만 사용하거나, 경로는 html로 지정하지 않고 css의 background-image 속성으로 이미지를 올리곤 했었다. 하지만 semantic 태그들과 스크린리더의 접근성을 위해서는 보다 세부적인 이미지 삽입의 태그가 필요한것. 또는 개념으로만 살짝 알고있던 것들을 다시한번 되짚어보도록 하자. 의 srcset 속성 사용자 브라우저의 width 값에 따라 이미지 사이즈가 변경된다면 대개 css의 Media Query를 종종 이용하긴 한다. 그러나 기획자나 PM들과의 협업중에 무엇으로 정하자고 결정함에 따라 html로 작업할지, css로 작업할지 결정한다고 함. 마라탕은 청탕으로 먹어야 제맛 태그를 이용할때 접근성을 위해 alt값 외 이미지에.. 2022. 4. 4.
이종찬 강사님 CSS 특강 | 행복하DA ✨ CSS는 무엇인가 html을 웹페이지를 구성하는 뼈대라고 구성한다면 css는 그 뼈대에 덧입혀지는 살거죽이라고 부를 수 있겠다. 또한 꾸미기 요소로 이루어진 요소로서 Cascading Style Sheet라고 부르며 말 그대로 계단식으로 하나하나 쌓아 올라가며 html을 꾸미는 언어라고 보면 된다. 과거 애매한 기간동안 퍼블리셔로 일하기 시작할때, 내가 코딩에 확 눈을 띄게 된 계기도 css로 작업하는 코딩 결과물들이었다. css 스타일링 작업은 진짜...진짜 완전 재미있다. 내가 만들어놓은 구조에 이거저거 올리면서 그게 또 바로바로 변하는 모습을 볼 수 있으니 코딩입문자들에게 배우기에 정말 적합한 웹언어가 아닐까 싶을 정도. 오늘은 특강 명사님으로 빔캠프의 이종찬(https://www.youtube.. 2022. 4. 1.
Github 입문 | 스테이지로 올라와 ✨Github의 특징 형상관리, 버전관리는 개발자들에게 있어서 매우 중요하고도 중요한 관리 툴이라 볼 수 있다. 게임으로 치자면 일종의 세이브 데이터를 계속 쌓아두는 개념이라 볼 수 있다. 또한 포토샵 개념으로도 비슷하게 볼 수 있는데 포토샵으로 작업할때는 이전 작업물을 ctrl + z 를 이용하여 이전으로 계속 돌아갈 수 있다. git도 이렇게 비슷한 관점으로 볼 수 있다. 어느 시점으로 돌아가서 해당 작업물을 불러와서 수정작업을 할 수도 있고, 해당 데이터를 다른 사람들과 같이 협업하는 과정에서 무지하게 긴 코드를 다른 공동작업자들과 함께 분할하여 작업이 가능하다. 이것들을 git이라는 형상관리 툴로 작업할 수 있는것이고 github이라는 호스팅 사이트에서 버전을 관리할 수 있는 것. 형상관리 툴로 .. 2022. 3. 31.
HTML Living Standard(2) | Grouping contents ✨저 그러니까... 누구였더라? 나름 html 사용에 있어서는 어느정도는 알고있다고 자부했지만, 평소에 잘 안쓰던 태그들이라던가 적확한 용례를 제대로 알아봄에 있어서는 어느정도 아쉬운 부분은 있을 수 있다. 내 기준 평소에 잘 쓰지 않았던 태그들을 한번 정리해 보았다. ✨Grouping Contents CSS html에 살을 붙여주는 스타일 목록의 대표로 치면 ul(순서가 없는 목록), ol(순서가 있는 목록), li(목록의 요소들)들이 대부분이지만 어떠한 정의할것이 필요할때 쓰이는 목록. 쉽게 목록의 뜻을 풀어서 설명하자면 다음과 같다. dl : 정의목록, definition list dt : 정의할 용어, definition term dd : 용어를 설명, definition description 주.. 2022. 3. 30.
모놀리식 아키텍쳐와 마이크로서비스 아키텍쳐 | 백엔드 입문 ✨아키텍쳐가 무엇이고 아키텍쳐(Architecture)는 '건축학'이라는 뜻의 단어로서 컴퓨터 공학에 쓰이는 단어이다. 이것을 프로그래밍 언어로서도 많이 쓰이게 되는데 그 뜻을 그대로 가지고 와서 시스템을 만드는데 기반이 되는 기본 베이스라고 생각하면 된다. FE개발자로 나아갈지라도, 백엔드에 대한 지식이 부족하면 서비스를 운용해나가기 어렵다. 아니 사실 그전에 백엔드 개발자와의 협업에서 많이 삐걱거릴것이 분명하다... 그렇기에 백엔드 개발의 겉핥기로 모놀리식 아키텍쳐와 마이크로 서비스 아키텍쳐에 대해서 알아보려고 한다. ✨ 모놀리식 아키텍쳐 (Monolithic Architecture) 기본적인 아키텍처를 지향하며 아키텍쳐라는 개념이 컴퓨터 공학에 적용되기 전 대부분의 웹 기반의 어플리케이션은 해당 아.. 2022. 3. 30.
Emmet 문법 | 코딩을 보다 쾌적하게 ✨사람은 도구를 쓸 줄 알아야... 지성을 가진 사람은 모름지기 도구를 쓸 줄 알아야 한다. 그리고 손가락이 휘날리는 키보드 예술의 경지라 칭할 수 있는 코딩을 함에 있어서 이 예술혼을 더욱 불태울 수 있는 보조도구가 있으리니 그것은 바로 키크론k8 Emmet 문법이라 칭하는 코드 에디터의 편의기능! 왠만한 html 에디터는 해당 기능이 기본 플러그인으로 내장되어 있으며 해당 기능을 익히면서 쾌적하게 이용해보자. ✨ Emmet 문법의 기본 태그들을 쓸때 띄워쓰면 안된다. space바 압수 자식요소 생성은 '>'을 이용하며 문장은 영문화권 베이스의 좌👉우 방향으로 읽는다 div태그는 기본 베이스. div에 클래스를 넣어 생성할 경우 div.(className) 넣는것이 아닌 '.'만 넣어서 생성 아이디는 .. 2022. 3. 30.
HTML Living Standard(1) | 기본 개요 ✨HTML Living Standard가 뭐여? 지금까지 HTML(Hypertext Markup Language)은 여러가지 변화과정을 거쳐왔었다. 기본 초창기 처음 HTML부터 Sementic Tag (main, section, article 등의) 가 등장했던 HTML5, 그리고 현재의 HTML Living Standard. 현재 22년 3월 기준 쓰이고 있는 HTML 규격이라고 부를 수 있고, Living Standard 를 같이 쓰기보다는 우리가 일반적으로 부르는것처럼 HTML로 불려지는 것이 좋다고 한다. 사실 HTML5로 불려도 차이가 없다고 함. 기본적으로 대부분 많이 쓰이게 되는 태그는 사진에서 보여지는 태그들이 대부분. 사실 퍼블리셔로 일한적이 있었던지라, 기본적인 head 태그 라던가 .. 2022. 3. 30.
IP / PORT | 똑똑, 형려리네 집 맞나요? (이름이 사용되어진 칭구 형렬쿤... 제일먼저 자네 이름이 생각나서 적었다오 땡큐) ✨ IP란 무엇인가... IP란 기본적으로 Internet Protocol Address를 줄여서 IP라고 불림. 이중 Protocol은 통신장비등이 체계적으로 소통하기 위해 준수해야할 규칙이라고 볼 수 있으며 이말인즉 인터넷 주소의 약속이라고 볼 수 있음. 기본적으로 컴퓨터, 스마트폰, IOT(사물인터넷)등 인터넷을 접속할 수 있는 스마트한 기기들에는 고유한 주소가 붙음. 전화기로 비유할 수 있다. 각자 고유한 전화번호를 가지고 소통을 하는것에 비유하면 각 인터넷 접속하는 기기들에게는 고유의 IP라는 전화번호를 가지고 있는 셈. ✨ IP 주소 내 컴퓨터의 IP주소를 검색하기 위해서는 구글등에서 'my ip'로 검색하면 .. 2022. 3. 30.
URL | 웹동산 등기부등본 떼러왔어요 ✨URL을 뭐라고 정의할 수 있을까? URL은 얼추 다음과 같은 형태로 보여지게 된다. (1)_https://www.nowonlib.kr/bbs/content/1\_16939?subject\_code=16&mId=501010100 (2)_https://ko.javascript.info/intro#ref-42 인터넷을 볼때마다 어렵지 않게 볼 수 있는 주소들 이기도 하다. 그리고 이 종류는 크게 5가지로 나뉠 수 있다. protocol domain file directory & file name parameter flagment 하나하나 차근차근 알아보자 ✨Protocol 크게 두가지로 나뉠 수 있음 http : html 문서를 주고 받을 수 있는 통신 방법으로 일반적. 클라이언트(user)와 서버(접속하.. 2022. 3. 30.

티스토리툴바