css
html 과 함께 프론트엔드 개발에 있어서 빼놓을수 없는 이 언어..
미디어쿼리에 대한 이해를 하기위해, 아침 10시부터 얼마나 많은 삽질을 한지 모르겠다.
아무래도 개념 파악 미숙일꺼다, 그리고 내가 확실하게 배운것은
변수의 이름이 한눈에 알아보기 쉽게 구성되어있지 않아서 계속
이게 뭘 의미하던거더라?? 하며 코드를 이리저리 계속 찾아본게 아닐지 모른다 ..
하다하다 너무 화가 났지만 반응형 웹을 생각했다면,
레이아웃에 그냥 이렇게 하면되겠지 하며 그냥 넘어가지 않았을거다..
내가 코드로 작성 한 스타일은
이곳으로 가면 볼수있다.
지금 다시금 확인중에 있다. 문제는 단하나 슬라이더의 화살표 부분을 아직 해결하지못했다;;
반드시 알아 낼 것이다 !
오늘은 Nomal flow로 개념잡기 내용을 기록해보고자 한다
노말플로우?
노말플로우라고 하면 좀 생소할수있다
나역시도 생소했다.
쉽게 풀이하자면
브라우저에 css를 통해 원하는 디자인을 그리는데
디자인을 그리는 여러 형태중 그룹핑된 하나의 형태이다
노말플로우는 static, 태그들이 기본적으로 가지고있는 속성을 기준으로
베이직하게 그리는 형태이다
크게 BLOCK FOMATTING CONTEXT,ILINE FOMATTING CONTEXT
REALITIVE 속성이 여기에 해당된다
기본적으로 블록 범위를 가지고있는 div, 인라인블록을 가지고있는 span이
여기에 해당된다
static 상태 에서 동작되며, 이 3가지를 제외한 다른 속성들은 다른 형태의 조건에서
작동한다
그래서 css는 버전 개념이 없는것이다.
가지각각의 속성들이 버전업데이트가 아닌 속성자체의 업데이트가 되고 있고,
브라우저에, 또 버전에 따라서도 호환여부가 달라진다.
css는 레벨 개념으로 나뉘어져있다.
relative 는 static상태에서 동작된다
정확하게는 static 으로 그렸는데 상대적으로 이동 시킨다가 된다
static과 같이 공존한다면 위로 뛰우는 성질이 있다 .
position : relative ;
top: 40px;이렇게 코들르 작성하면
띄운 상태로 원하는 위치에 정렬 시킬수있다.
css는 이러한 성질들을 파악하는게 중요한것같다
각각의 속성이 지닌 역할들 말이다.
이제 의미없이 렐러티브를 막 갖다 쓰는 경우는 없을것이다^^
