처음부터 어려웠다. 영어로 되어있었기 때문이다. 그렇지만 그것은 문제가 되지 않는다. 나름 유학파 이기 때문에 식은죽 먹기 수준은 아니지만 꾸역꾸역 해석해 가며 문제를 풀어봤다. 첫번째 오답노트 대충 화면에 이미지가 뜨지 않을 경우 대체할 텍스트를 입력해야한다는 것인데 alt가 그 역할을 해준다. 네트워크가 불안정하거나 오류가 있을 경우 이미지가 출력이 되지 않는 경우 텍스트로 대체되어 출력되도록 하는 것이다. 문제에 답이있었다... Alternate text = alt ,,, HTML을 배우며 느낀점 백엔드 개발자로써 프론트 엔드 지식이 어느정도 필요하다는 것을 알게 되었다. 내가 일하는 영역이 ui/ux를 벗어난 개념인줄로 생각하고 있었지만 프론트에서 구현되는 방식과 내용을 어느정도 알고 있다면 업무..
새벽을 넘겼다... 일어나보니 8시 50분,,, 하마터면 라이브세션을 지각할 뻔했다!!! 모두들 어렵지 않게 잘 하시는 것 같은데 나는 생각처럼 잘 구현되지 않아서 밤새워서 구현하다 잠을 자게되었다ㅜㅜ 내가 처음 구상했던 와이어 프레임은 다음과 같다 동그란 부분에 이름을 입력하고 what's happening?에 메세지를 남길 내용을 입력하여 오른쪽에 Tweet을 클릭하면 밑에 와이어프레임 부분에 구현되는 방식이다. 최초 화면은 다음과 같다 여기에 제목부분을 수정하고 필요한 부분을 구현해야한다. 필요한 부분은 다음과 같다. 제목을 수정한다. id 입력부를 만든다. message 입력부를 만든다. tweet 버튼을 만든다. 트윗을 최신화 할 수 있도록 show new tweet 버튼을 만든다. CSS를 적..
제품을 만들기에 앞서서 시제품(prototype)을 만들게 된다. 웹사이트를 제작 할 때에도 HTML과 CSS 및 Js를 적용하기에 앞서서 일종의 시안이나 도안이 필요하다. 우리는 그것을 와이어프레임을 통해 만들 수 있다. 와이어 프레임 와이어프레임은 '선'이라는 의미를 가진 와이어와 '틀'이라는 의미를 가진 프레임이 합쳐진 언어로 '선으로 이루어진 틀'을 표현한다. 즉, 와이어프레임은 내가 만들 사이트가 어떻게 구성될지 간단히 설계하기 위해 만들어졌으며, 제품의 제작에 앞서 제품의 레이아웃과 구조를 간략하게 보여주기 위한 용도로써 사용된다. 목업 목업은 '실물크기의 모형'을 뜻한다. 즉, 목업 사이트를 구현한다는 것은 실제로 원본의 사이트와 매우 유사하지만 그 기능이나 이용에 제한이 있는 사이트를 뜻한..
flexbox의 핵심 개념 부모자식관계를 지칭하는 트리구조를 가지고 있다. 즉, 부모에 요소를 적용하여 자식의 레이아웃을 유연하게 구성하는 방법이다. flexbox를 활용한다면 요소를 정렬하고 영역을 지정하는 것을 보다 쉽게 할 수 있다. Flexbox의 활용 Flexbox는 속성을 사용할 때 '부모 요소'와 '자식 요소'에 사용하는 속성들이 있다. 부모에게 적용하는 속성 flex-direction 속성은 부모 요소에 설정하는 속성이며, 정렬축을 결정하는 역할을 한다. flex-direction 주요 속성값은 row(가로,좌우), column(세로, 위아래), row-reverse(가로,우좌), column-reverse(세로, 아래위)가 있다. jutify-content 속성은 자식 요소들을 축의 수평..
